Context Persist

A lightweight solution for storing values in Context in Local Storage.

If you prefer to utilize Context for Global State Management but want similar functionality to Redux Persist, this library might be a good fit for your use case.

We do not currently support storing non-serializable data (like Dates) into Local Storage. We might look at adding a transform function option later on if this is requested enough.

Installing

Using npm:

1$ npm install react-persist

Using yarn:

1$ yarn add react-persist

Basic Usage

1import { PersistProvider } from 'react-persist';
2
3const ParentComponent: FC = () => {
4  return (
5    <PersistProvider
6      defaultValue="default here"
7      persistKey="cool-key-here"
8      persistVersion={1}
9    >
10      <ChildComponent />
11    </PersistProvider>
12  );
13};

1const ChildComponent: FC = () => {
2  const { value, updateValue } = usePersist<string>();
3
4  return (
5    <div>
6      <h1>{value}</h1>
7      <button onClick={() => updateValue('New value for local storage')}>
8        Update Value!
9      </button>
10    </div>
11  );
12};

API

PersistProvider

The Provider for persisting a value in local storage. If you want to guarantee a clear on values in local storage for all users, you just need to update the version number for the specific Provider.

1interface PersistProviderProps {
2    children: ReactNode;
3    defaultValue: any;
4    persistKey: string;
5    persistVersion: number;
6}
7
8const PersistProvider: ({ children, defaultValue, persistKey, persistVersion, }: PersistProviderProps) => JSX.Element;

usePersist

A hook that will give you access to the value stored in the PersistProvider, as well as, an update value function for actually changing the value in the Provider. You have the option to pass in the type of the value if you would like to have some type safety.

1function usePersist<T = any>(): {
2  value: T;
3  updateValue: (value: T) => void;
4};

Found a bug or want an enhancement?

Please file an issue on this repo and I will do my best to prioritize the requests appropriately!