Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/sidebar-provider.jsonStorybook
Explore all variants, controls, and accessibility checks in the interactive Storybook playground.
View in StorybookCode
"use client";
import {
createContext,
type ReactNode,
useContext,
useMemo,
useState,
} from "react";
type SidebarContextType = {
open: boolean;
setOpen: (open: boolean) => void;
};
const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
export function useSidebar() {
const context = useContext(SidebarContext);
if (!context) {
throw new Error("useSidebar must be used within SidebarProvider");
}
return context;
}
export function SidebarProvider({ children }: { children: ReactNode }) {
const [open, setOpen] = useState(false);
const value = useMemo(() => ({ open, setOpen }), [open]);
return (
<SidebarContext.Provider value={value}>{children}</SidebarContext.Provider>
);
}