arkyn
ChangelogGuides

DrawerProvider

DrawerProvider supplies drawer context so multiple keyed drawers can be opened, updated, and closed from anywhere in the tree.

tsx

import { DrawerProvider } from "@arkyn/components";

Basic Usage

tsx

<DrawerProvider>
    <App />
</DrawerProvider>

Multiple Drawer Keys

Use independent keys to manage different drawers without state collisions.

tsx

function DrawerActions() {
    const { openDrawer } = useDrawer();


    return (
        <>
            <button onClick={() => openDrawer("navigation", { section: "main" })}>
                Open navigation
            </button>
            <button onClick={() => openDrawer("filters", { category: "tech" })}>
                Open filters
            </button>
        </>
    );
}


<DrawerProvider>
    <DrawerActions />
</DrawerProvider>;

Scoped Drawer API

When useDrawer(key) is used, open/close actions are automatically scoped to that key.

tsx

function FiltersDrawer() {
    const { drawerIsOpen, drawerData, closeDrawer } = useDrawer<{
        category: string;
    }>("filters");


    if (!drawerIsOpen) return null;


    return (
        <aside>
            <p>Category: {drawerData?.category}</p>
            <button onClick={closeDrawer}>Close</button>
        </aside>
    );
}

Notes

Hook dependency
The useDrawer hook must be called inside DrawerProvider. Outside provider scope, it throws an error.

Properties

children - ReactNode React subtree that will receive drawer context.
enableDrawerAutomation - boolean Optional flag reserved for drawer automation behavior.
On this page