Inspect your zustand store in React DevTools 🐻⚛️
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);
}
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);
}
yarn add simple-zustand-devtools --dev
Use a 1.0.1 release (or lower) for React 17.
npm install [email protected] --save-dev --legacy-peer-deps
import { StoreApi } from 'zustand';
type ZustandStore = StoreApi<Record<string | number | symbol, any>>;
export function mountStoreDevtool(
storeName: string,
store: ZustandStore,
rootElement?: HTMLElement
): void;
Below is a list of commands you will probably find useful.
Runs the project in development/watch mode. Project will be rebuilt upon changes.
Bundles the package to the dist
folder.
The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
Runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.