use-disclosable
v0.2.0
Published
A react hook that allow to easily manage disclosable elements
Downloads
176
Maintainers
Readme
use-disclosable
Documentation
use-disclosable
is a react library that allow to easily manage disclosable elements.
It provide a simple API that allow you to quickly integrate any disclosable elements (custom or from a library) into your application.
[!NOTE]
Disclosable elements here are defined by an UI elements that have short lifespan such as modal, dialogs, drawers, etc.
- 📚 Framework agnostic
- 🔗 Type safe
- 💪 Zero dependencies
- 🔥 Lightweight
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.
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>
)
}