use-disclosable

    Quick start

    1. Install the package

    npm
    yarn
    pnpm
    bun
    deno
    npm install use-disclosable

    2. Register a disclosable root

    The disclosable root is the mount point of your disclosable element. You usally want to mount it close to the body of your application.

    import { DisclosableRoot } from 'use-disclosable';

const App = () => {
    return (
        <>
            <AppContent />
            <DisclosableRoot />
        </>
    )
}

    3. Update your disclosable element

    Now you can update your disclosable element in order to make it react to disclosable events.

    import type { DisclosableInjectedProps } from 'use-disclosable';
import { Dialog } from "my-awesome-library";

import MyDialogElement from './MyDialogElement';

type MyDialogElementProps = {
    title: string;
} & DisclosableInjectedProps

const MyDialogElement: React.FC<MyDialogElementProps> = ({ title, isDisclosableOpen, closeDisclosable }) => {
    return (
        <Dialog isOpen={isDisclosableOpen} onOpenChange={(isOpen) => !isOpen && closeDisclosable()}>
            <h1>{title}</h1>
        </Disclosable>
    )
}

    3. Use the disclosable hook

    Now you can use the useDisclosable hook to manage your disclosable element, anywhere in your application.

    import { useDisclosable } from 'use-disclosable';
import MyDialogElement from './MyDialogElement';

const MyDisclosableElement = () => {
    const { open } = useDisclosable();

    return (
        <div>
            <button onClick={() => open(MyDialogElement, {props: {title: "Hello"}})}>Open My dialog</button>
        </div>
    )
}