simple-zustand-devtools

Inspect your zustand store in React DevTools 🐻⚛️

Usage

import create from 'zustand';
import { mountStoreDevtool } from 'simple-zustand-devtools';

export const useStore = create(set => {
  // create your zustand store here
});

if (process.env.NODE_ENV === 'development') {
  mountStoreDevtool('Store', useStore);
}

Mount more than one store

mountStoreDevtool creates a new HTML element with id: simple-zustand-devtools-${storeName}, where storeName is a name provided as the first argument. You can mount more than one store, as long as store names remain unique. For example:

import create from 'zustand';
import { mountStoreDevtool } from 'simple-zustand-devtools';

export const useStore1 = create((set, get) => {
  // create your zustand store here
});

export const useStore2 = create((set, get) => {
  // create your zustand store here
});

if (process.env.NODE_ENV === 'development') {
  mountStoreDevtool('Store1', useStore1);

  mountStoreDevtool('Store2', useStore2);
}

Installation

For React 18+

yarn add simple-zustand-devtools --dev

For React 17

Use a 1.0.1 release (or lower) for React 17.

npm install simple-zustand-devtools@1.0.1 --save-dev --legacy-peer-deps

Docs

mountStoreDevtool

import { StoreApi } from 'zustand';

type ZustandStore = StoreApi<Record<string | number | symbol, any>>;

export function mountStoreDevtool(
  storeName: string,
  store: ZustandStore,
  rootElement?: HTMLElement
): void;

Local Development

Below is a list of commands you will probably find useful.

`npm start` or `yarn start`

Runs the project in development/watch mode. Project will be rebuilt upon changes.

`npm run build` or `yarn build`

Bundles the package to the dist folder. The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).

`npm test` or `yarn test`

Runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.

beerose/simple-zustand-devtools