React Shared Storage

React Shared Storage is built to be a simple way for storing state in the browsers local storage. It will keep your state synced between different components and different windows and tabs.

Installation

Install it with Yarn:

yarn add react-shared-storage

Or NPM:

npm i react-shared-storage

Usage

The package exposes the usePersistentState hook which works similarly to set state. The biggest difference is that you will also have to provide a key property which is used to identify the property between components and windows.

import { usePersistentState } from 'react-shared-storage'

export function CounterComponent() {
  // The `counter` key will be used to identify the value.
  const [ counter, setCounter ] = usePersistentState('counter', 0)

  return (
    <div>
      <div>
        { counter }
      </div>
      <button onClick={ () => setCounter(counter + 1) }>
        Increase
      </button>
    </div>
  )
}

export function AnotherComponent() {
  // This component will also react to the `counter` value being changed.
  const [ counter, setCounter ] = usePersistentState('counter', 0)

  return (
    <div>
      <div>
        { counter }
      </div>
      <button onClick={ () => setCounter(counter + 1) }>
        Increase
      </button>
    </div>
  )
}

If you are want to save the state to local storage, but don't want it to sync between components and windows, you can disable the sync:

usePersistentState('counter', 0, {
  shouldSync: false
})

The different options you can pass to the usePersistentState hook are:

|Name|Default Value|Description| |---|---|---| |saveInterval|200|Determines how often the state is saved to local storage.| |shouldSync|true|Used to enable or disable syncing of state between windows.|

Development

There is a demo app in the demo/ directory that you can use for testing. Start it with:

yarn demo

There is a linter:

yarn lint

and a test suite:

yarn test

Contributing

1. Fork it (https://github.com/your-github-user/test/fork)
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request

Contributors

• Christoffer Artmann - creator and maintainer