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

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!