🤔 React Remember

Persistent global state in React

👉 Demo 👈

Include the useRemember hook in a component:

const [the, remember] = useRemember();

From anywhere in your application:

remember({ answer: 42 });

From anywhere else in your application:

<div>{the.answer}</div>
// displays 42

This value is saved in local storage and will persist until you change or reset it.

Installation & Usage

Install with yarn add react-remember or npm install react-remember.

Wrap your top-level app with the Rememberer™:

import Rememberer from "react-remember";

const App = () => {
  return <Rememberer>{/* normal app.js stuff */}</Rememberer>;
};
ReactDOM(<App />, root);

Now you can useRemember in any component. The data will be available everywhere, updatable from anywhere and will persist between refreshes.

// Button.js
import { useRemember } from "react-remember";
const Button = () => {
  const [the, remember] = useRemember();
  return (
    <button onClick={() => remember({ count: ++the.count || 1 })}>
      click me
    </button>
  );
};

// Info.js
import { useRemember } from "react-remember";
const Info = () => {
  const [the, remember] = useRemember();
  return <div>Button clicked {the.count} times</div>;
};

Save to URL

The url prop will store the state in the url rather than localstorage.

<Rememberer url>...</Rememberer>

Defaults

Defaults are the values that are instantiated on first launch.

<Rememberer
  defaults={{
    count: 42,
    user: {}
  }}
>
  ...
</Rememberer>

Explorer

View a list of what's been remembered by adding the show property to the Rememberer.

<Rememberer show defaults={{ number: 1 }}>
  ...
</Rememberer>

FAQ

I thought global state was bad.

Yes.