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.

1import { useHashedState } from "use-hashed-state"
2
3const Check = ({ children = "" as ReactNode }) => {
4  const [checked, setChecked] = useHashedState<boolean>(
5    children,
6    false,
7    "plasmo-soc2"
8  )
9  return (
10    <Checkbox checked={checked} onChange={() => setChecked((c) => !c)}>
11      {children}
12    </Checkbox>
13  )
14}
15
16// Consume in another component:
17const Container = () => (
18  <>
19    <Check>
20      <WaveIcon /> Waved
21    </Check>
22    <Check>
23      <ClockTick />
24    </Check>
25  </>
26)

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.