simple-zustand-devtools

Inspect your zustand store in React DevTools 🐻⚛️

Usage

``ts
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);
}
`

$3

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:

`ts
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

`sh
yarn add simple-zustand-devtools --dev
`

Docs

$3

`ts
import { StoreApi } from 'zustand';

type ZustandStore = StoreApi>;

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

Local Development

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

$3

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

$3

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

$3

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