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
- Usage
- Basic
- Referencing stores
- More examples

Installation

npm i usestore-react --save

Usage

$3

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.

``ts
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 (


`ts
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 (


$3

Check out the Codesandbox demo!