Zustand: State Management in React

Zustand is a lightweight and easy-to-use state management library for React. In this guide, we'll walk through setting up Zustand for managing state in a React app.

1. Install the package

To get started, you’ll first need to install Zustand:

pnpm install zustand

2. Create a state store

Next, create a state store using Zustand’s create function.

import { create } from "zustand";

type SubscriptionModalState = {
  isOpen: boolean;
  onOpen: () => void;
  onClose: () => void;
};

export const useSubscriptionModal = create<SubscriptionModalState>((set) => ({
  isOpen: false,
  onOpen: () => set({ isOpen: true }),
  onClose: () => set({ isOpen: false }),
}));

3. Bind the state to your components

Finally, use the state store in your components. Here’s how you can connect the modal state to a Dialog component:

const { isOpen, onClose, onOpen } = useStore();

<Dialog open={isOpen} onOpenChange={onClose}>
  <DialogContent>
</Dialog>