Skip to content
generated from PlasmoHQ/qtt

Store state in localstorage using a serialized key generated using node-object-hash

License

Notifications You must be signed in to change notification settings

PlasmoHQ/use-hashed-state

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Why?

To boldly go where no one has gone before

Acknowledgment

License

MIT 🖖 Plasmo Corp.

About

Store state in localstorage using a serialized key generated using node-object-hash

Resources

License

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published