EZSS

Easier alternative of react-secure-storage.

Why

The react-secure-storage code is unnecessarily complex and doesn't support custom data types.

EZSS only implements its internal EncryptionService class so that you can use it with the libraries you want. (e.g. @mantine/hooks)

Install

pnpm add ezss
# yarn add ezss
# npm i ezss

Usage Examples

do you have other examples? PR's welcome!

@mantine/hooks - useLocalStorage

import { useLocalStorage } from '@mantine/hooks'
import encryption from 'ezss' // A
// import { EncryptionService } from 'ezss' // B

export const useSecureLocalStorage =
  <T = string>(props: Parameters<typeof useLocalStorage<T>>[0]) => {
    // const encryption = new EncryptionService() // B

    return useLocalStorage<T>({
      ...props,
      serialize: value => encryption.encrypt(JSON.stringify(value)),
      deserialize: value => {
        if (value) {
          try {
            return JSON.parse(encryption.decrypt(value))
          } catch {
            return encryption.decrypt(value)
          }
        } else return value
      },
    })
  }

License

Licensed under the MIT.