Skip to content
A custom React Hook that persist state from useReducer 💾
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
src
.babelrc
.gitignore
LICENSE
README.MD
package-lock.json
package.json 2.1.0 Sep 12, 2019

README.MD

use-persisted-reducer

A custom React Hook that persist state from useReducer

npm version

use-persisted-reducer is not a hook itself, but is a factory that accepts a storage key and an optional storage provider (default = localStorage) and returns a hook that you can use as a direct replacement for useReducer.

Features

Persists the state to localStorage

Requirement

To use use-persisted-reducer, you must use react@16.8.0 or greater which includes Hooks.

Installation

$ npm i use-persisted-reducer --save

or

$ yarn add use-persisted-reducer

Example

import React from 'react';
import createPersistedReducer from 'use-persisted-reducer';

const usePersistedReducer = createPersistedReducer('state');

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = usePersistedReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

export default Counter;

You can also pass in your own storage provider

Example

import React from 'react';
import createPersistedReducer from 'use-persisted-reducer';

// defaults to globalThis.localStorage
const usePersistedReducer = createPersistedReducer('state', globalThis.sessionStorage);

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b feature-name
  3. Commit your changes: git commit -am 'Some commit message'
  4. Push to the branch: git push origin feature-name
  5. Submit a pull request 😉😉

How can I thank you?

Why not star the github repo? I'd love the attention! Why not share the link for this repository on Twitter?

Don't forget to follow me on twitter!

Thanks! John Ayeni.

License

MIT Licensed

You can’t perform that action at this time.