https://github.com/beerose/simple-zustand-devtools

Inspect your zustand store in React DevTools 🐻⚛️
https://github.com/beerose/simple-zustand-devtools

Last synced: about 15 hours ago
JSON representation

Inspect your zustand store in React DevTools 🐻⚛️

• Host: GitHub
• URL: https://github.com/beerose/simple-zustand-devtools
• Owner: beerose
• Created: 2019-07-20T09:39:41.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-12T11:22:10.000Z (almost 2 years ago)
• Last Synced: 2024-12-15T22:04:41.360Z (8 days ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/simple-zustand-devtools
• Size: 192 KB
• Stars: 346
• Watchers: 3
• Forks: 7
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# simple-zustand-devtools

Inspect your [zustand](https://github.com/react-spring/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);

}

```

### 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:

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

### For React 18+

```sh

yarn add simple-zustand-devtools --dev

```

### For React 17

Use [a 1.0.1 release (or lower)](https://www.npmjs.com/package/simple-zustand-devtools?activeTab=versions) for React 17.

```sh

npm install [email protected] --save-dev --legacy-peer-deps

```

## Docs

### mountStoreDevtool

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

### `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.