use-disclosable
Documentation
Documentation

Quick start

1. Install the package

npm
yarn
pnpm
bun
1npm 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.

App.tsx
1import { DisclosableRoot } from 'use-disclosable';
2
3const App = () => {
4    return (
5        <>
6            <AppContent />
7            </DisclosableRoot>
8        </>
9    )
10}

3. Update your disclosable element

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

MyDisclosableElement.tsx
1import type { DisclosableInjectedProps } from 'use-disclosable';
2import { Dialog } from "my-awesome-library";
3
4import MyDialogElement from './MyDialogElement';
5
6type MyDialogElementProps = {
7    title: string;
8} & DisclosableInjectedProps
9
10const MyDialogElement: React.FC<MyDialogElementProps> = ({ title, isDisclosableOpen, closeDisclosable }) => {
11    return (
12        <Dialog isOpen={isDisclosableOpen} onOpenChange={(isOpen) => !isOpen && closeDisclosable()}>
13            <h1>{title}</h1>
14        </Disclosable>
15    )
16}

3. Use the disclosable hook

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

MyDisclosableElement.tsx
1import { useDisclosable } from 'use-disclosable';
2import MyDialogElement from './MyDialogElement';
3
4const MyDisclosableElement = () => {
5    const { open } = useDisclosable();
6
7    return (
8        <div>
9            <button onClick={() => open(MyDialogElement, {props: {title: "Hello"}})}>Open My dialog</button>
10        </div>
11    )
12}