Quick start
1. Install the package
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.
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}
