derive-zustand v0.0.1

derive-zustand

A function to create a derived Zustand store from stores

Install

npm install zustand derive-zustand

Usage

import { createStore, useStore } from 'zustand';
import { derive } from 'derive-zustand';

const countStore = createStore(() => 0);
const doubleCountStore = derive<number>((get) => get(countStore) * 2);

const Counter = () => {
  const count = useStore(countStore);
  const doubleCount = useStore(doubleCountStore);
  const inc = () => countStore.setState((c) => c + 1);
  return (
    <div>
      <div>count: {count}</div>
      <div>doubleCount: {doubleCount}</div>
      <button type="button" onClick={inc}>
        +1
      </button>
    </div>
  );
};

Examples

The examples folder contains working examples. You can run one of them with

PORT=8080 yarn run examples:01_typescript

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

You can also try them in codesandbox.io: 01