persistence-hooks

1.1.0 • Public • Published

persistence-hooks

React hook for saving & hydrating state from local storage, session storage, or cookies

Install

yarn add persistence-hooks

Usage

Basic Example

Let's say you want a component to read from & store state in local storage:

import { useStateAndLocalStorage } from 'persistence-hooks'
 
function MyComponent() {
 
  const INITIAL_VALUE = 'hello world'
  const STORAGE_KEY = 'myComponentLocalStorageKey'
  
  const [value, setValue] = useStateAndLocalStorage(
    INITIAL_VALUE,
    STORAGE_KEY,
  )
  
  // use value & setValue just as you would if returned from `useState`
  // ...
  
}

Available Strategies

  • useStateAndLocalStorage
  • useStateAndSessionStorage
  • useStateAndCookie

Arguments

All 3 strategies take in the following arguments:

initial: the default value when no value has been persisted

key: the entry in the given persisted strategy to set and draw from


In useStateAndCookie, a 3rd argument can be passed to specify expiration. Here's the same example above, but using a 10-second cookie:

import { useStateAndCookie } from 'persistence-hooks'
 
function MyComponent() {
 
  const INITIAL_VALUE = 'hello world'
  const STORAGE_KEY = 'myComponentLocalStorageKey'
  
  const [value, setValue] = useStateAndCookie(
    INITIAL_VALUE,
    STORAGE_KEY,
    { days: 1 / 24 / 60 / 60 * 10 },
  )
  
  // ...
  
}

For more examples, check out the source.

Cheers 🍻

Package Sidebar

Install

npm i persistence-hooks

Weekly Downloads

0

Version

1.1.0

License

MIT

Unpacked Size

6.16 kB

Total Files

4

Last publish

Collaborators

  • harrysolovay
  • joeyparis