Sidebar Provider
Fournisseur de contexte pour gerer l'etat ouvert/ferme de la barre laterale. Installez Sidebar Provider depuis le registre VLLNT UI avec la CLI shadcn.
Fournisseur de contexte pour gerer l'etat ouvert/ferme de la barre laterale. Fait partie de la famille navigation dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Sidebar Provider a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/sidebar-provider.jsonSource
"use client";
import { createContext, type ReactNode, use, useMemo, useState } from "react";
type SidebarContextType = {
open: boolean;
setOpen: (open: boolean) => void;
};
const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
export function useSidebar() {
const context = use(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>
);
}
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.