usestore-react
v1.9.3
Published
A simple state management library for React using hooks
Downloads
311
Maintainers
Readme
useStore for React
A simple and small state management lib for React that uses the bleeding edge React's useState
hook.
Which basically means no magic behind the curtains, only pure react APIs being used to share state across components.
Try it on Codesandbox!
Table of Contents
Installation
npm i usestore-react --save
Usage
Basic
This is the most basic implementation of the library. create a store with its initial state.
Later, call useStore
inside components to retrieve its state and setState method.
The value passed as the first argument to the setState method will be the new state.
import React from 'react';
import { createStore, useStore } from 'usestore-react';
const clickCountStore = createStore('clickCount', 0);
const FirstComponent = () => {
// just use the useStore method to grab the state and the setState
const [clickCount, setClickCount] = useStore('clickCount');
return (
<div>
<h1>First component</h1>
<h2>The button was clicked {clickCount} times</h2>
<button onClick={() => setClickCount(clickCount + 1)}>Increment</button>
OR
<button
onClick={() => setClickCount((prevClickCount) => prevClickCount + 1)}
>
Increment
</button>
</div>
);
};
const SecondComponent = () => {
const [clickCount] = useStore('clickCount');
return (
<div>
<h1>Second component</h1>
<h2>
Totally separate from the others, but it is still aware of the same
state. clickCount: {clickCount}
</h2>
</div>
);
};
const ThirdComponent = () => (
<div>
<h1>Third Component</h1>
<h2>
Totally separate but can also update the state. Either by direct reference
to the store or by using the hook
</h2>
<button
onClick={() =>
clickCountStore.setState((prevClickCount) => prevClickCount + 1)
}
>
Increment
</button>
</div>
);
Referencing stores
It is possible to create multiple stores in an app. Stores can be referenced by using their name.
import React from 'react';
import { createStore, useStore } from 'usestore-react';
// The return can be used as an object
const clickCountStore = createStore('clickCount', 0);
// counter will start at 2
clickCountStore.setState(2);
// Or it can be used as an array
const [getName, setName, useName] = createStore('name', 'John Doe');
// name will start with 'Jane Doe'
setName('Jane Doe');
const StatefullHello = () => {
// You can get the store hook by its name
const [clickCount, setClickCount] = useStore('clickCount');
// or from its store
const [clickCount, setClickCount] = clickCountStore.useStore();
const [name] = useStore('name');
// or like this
const [name] = useName();
return (
<div>
<h1>Hello, {name}!</h1>
<h2>The button was clicked {clickCount} times</h2>
<button onClick={() => setClickCount(clickCount + 1)}>Update</button>
</div>
);
};
More examples
Check out the Codesandbox demo!