arkyn
ChangelogGuides

ModalProvider

ModalProvider supplies modal context so keyed modals can be opened, closed, and globally reset.

tsx

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

Basic Usage

tsx

<ModalProvider>
    <App />
</ModalProvider>

Open and Close Keyed Modals

Use modal keys to coordinate independent modal instances.

tsx

function Actions() {
    const { openModal, closeAll } = useModal();


    return (
        <>
            <button onClick={() => openModal("user-profile", { id: 42 })}>
                Open profile
            </button>
            <button onClick={closeAll}>Close all modals</button>
        </>
    );
}

Scoped Modal API

When useModal(key) is used, the returned methods are scoped to a single modal key.

tsx

function UserProfileModal() {
    const { modalIsOpen, modalData, closeModal } = useModal<{ id: number }>(
        "user-profile",
    );


    if (!modalIsOpen) return null;


    return (
        <section>
            <p>User id: {modalData?.id}</p>
            <button onClick={closeModal}>Close</button>
        </section>
    );
}

Notes

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

Properties

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