use-hashed-state

use-hashed-state is a hook library from plasmo to safely store data in localstorage with an unique key of any type, even a component.

The library is a typescript fork of use-persisted-state-hook but instead of md5, is uses node-object-hash, and it hashes both the key and the values.

Example

The Check component below is capable of having a state simply based on the content of its children - it is fully independent.

import { useHashedState } from "use-hashed-state"

const Check = ({ children = "" as ReactNode }) => {
  const [checked, setChecked] = useHashedState<boolean>(
    children,
    false,
    "plasmo-soc2"
  )
  return (
    <Checkbox checked={checked} onChange={() => setChecked((c) => !c)}>
      {children}
    </Checkbox>
  )
}

// Consume in another component:
const Container = () => (
  <>
    <Check>
      <WaveIcon /> Waved
    </Check>
    <Check>
      <ClockTick />
    </Check>
  </>
)

Usage in the wild

• Plasmo's SOC2 Check list

Why?

To boldly go where no one has gone before

Acknowledgment

• use-persisted-state-hook

License

MIT 🖖 Plasmo Corp.