https://github.com/yunho1017/react-zustand-devtools

zustand devtools component
https://github.com/yunho1017/react-zustand-devtools

devtools react zustand

Last synced: 3 months ago
JSON representation

zustand devtools component

• Host: GitHub
• URL: https://github.com/yunho1017/react-zustand-devtools
• Owner: yunho1017
• License: mit
• Created: 2024-06-06T15:49:37.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-06-28T05:44:12.000Z (7 months ago)
• Last Synced: 2024-10-01T00:43:26.325Z (3 months ago)
• Topics: devtools, react, zustand
• Language: TypeScript
• Homepage: https://react-zustand-devtools.vercel.app
• Size: 73.2 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-zustand-devtools

[![npm](https://img.shields.io/npm/v/react-zustand-devtools)](https://www.npmjs.com/package/react-zustand-devtools)

[![size](https://img.shields.io/bundlephobia/minzip/react-zustand-devtools)](https://bundlephobia.com/result?p=react-zustand-devtools)

use React Context with selector

[Examples](https://react-zustand-devtools.vercel.app/)

## Introduction

Zustand Devtools uses Redux devtools.

Redux Devtools is great, but you can't debug multiple zustand stores.

Using this library, you can debug multiple stores

## Install

This package has peer dependencies, which you need to install by yourself.

```bash

// npm

npm install react-zustand-devtools react zustand

// yarn

yarn add react-zustand-devtools react zustand

```

## Usage

```ts

// store.ts

import { create } from "zustand";

import { devtools } from "react-zustand-devtools";

const useStore = create(

  devtools((set) => ({

    ...Store,

  }))

);

```

```ts

// component.tsx

import { ZustandDevtools } from "react-zustand-devtools";

const Component = () => {

  return (

    

      open devtools

    

  );

};

```