Zustand State Inspector

Installation

npm install zustand-state-inspector

Usage

import { create } from "zustand"
import { ZustandDevTools } from "zustand-state-inspector"

const useYourStore = create<State>((set) => ({
  count: 0,
  inc: (num) => set((state) => ({ count: state.count + num })),
  dec: (num) => set((state) => ({ count: state.count - num })),
}))

const App = () => {
  const store = useYourStore()
  return (
    <div className="app">
      <ZustandDevTools state={store} />
    </div>
  )
}

Props

| Prop | Description | | --------------- | ------------------------------------------------------------------------------------- | | state | The zustand store to inspect | | showDevTools | Take control of the showDevTools state. Will hide the default icon if it's provided | | setShowDevTools | If you're passing in showDevTools, you need to pass in a setter function to update it |