react-opener
v1.1.91
Published
render React Component from anywhere
Downloads
10
Maintainers
Readme
react-opener
render React Component from anywhere!
Introduction
Previously in order to show Dialog in React, we had to write the code below
const Component = () => {
const [open, setOpen] = useState(false);
return (
<div>
<button
onClick={() => {
setOpen(true);
}}
>
open dialog
</button>
<Dialog
open={open}
onClose={() => {
setOpen(false);
}}
/>
</div>
);
};
The code above has Dialog-Related code throughout the Function Component.
If components become complicated, readability becomes poor and maintenance becomes difficult.
This library can show React Component from anywhere to solve this issues.
Install
This package has peer dependencies, which you need to install by yourself.
// npm
npm install react-opener react
// yarn
yarn add react-opener react
Usage
Basic
import { ReactOpener, ReactToastOpener } from "react-opener";
const ToastStore = ReactToastOpener.createStore();
const DialogStore = ReactOpener.createStore();
const Container = () => {
return (
<div>
<button
type="button"
onClick={() => {
ToastStore.success("toast !");
}}
>
toast
</button>
<button
type="button"
onClick={() => {
DialogStore.open({
element: ({ close }) => <YourDialog open={true} onClose={close} />,
});
}}
>
dialog
</button>
// Rendered here !
<ReactToastOpener store={ToastStore} />
<ReactOpener store={DialogStore} />
</div>
);
};
useOpener
import { ReactOpener } from "react-opener";
const Container = () => {
const [dialog, opener] = ReactOpener.useOpener();
return (
<div>
<button
type="button"
onClick={() => {
dialog.open({
element: ({ close }) => <YourDialog open={true} onClose={close} />,
});
}}
>
dialog
</button>
{opener}
</div>
);
};