named-zustand

named-zustand helps creating multiple store instances of same stateCreator using different names, and components using the same store name share its state.

Install

npm install named-zustand

Usage

import React from 'react';
import { createNamed } from 'named-zustand';
import shallow from 'zustand/shallow';

interface BearState {
  age: number;
  setAge: (age: number) => void;
}

const useBearStore = createNamed<BearState>((set) => ({
  age: 1,
  setAge: (age) => set({ age }),
}));

const Bear = ({ name }: { name: string }) => {
  const [age, setAge] = useBearStore(name, (s) => [s.age, s.setAge], shallow);

  return (
    <div>
      <span>
        I am {name}, {age} year old
      </span>
      <button onClick={() => setAge(age + 1)}> + </button>
      <button onClick={() => setAge(age > 1 ? age - 1 : age)}> - </button>
    </div>
  );
};

const GroupOfBear = () => (
  <div>
    <Bear name='foo' />
    <Bear name='bar' />
    <Bear name='foo' />
    <Bear name='bar' />
  </div>
);

Examples

The examples folder contains a story to show the usage.

cd examples/storybook && yarn install && yarn storybook

and open http://localhost:6006 in your web browser.