react-opener

render React Component from anywhere!

Demo

Introduction

Previously in order to show Dialog in React, we had to write the code below

1const Component = () => {
2  const [open, setOpen] = useState(false);
3
4  return (
5    <div>
6      <button
7        onClick={() => {
8          setOpen(true);
9        }}
10      >
11        open dialog
12      </button>
13
14      <Dialog
15        open={open}
16        onClose={() => {
17          setOpen(false);
18        }}
19      />
20    </div>
21  );
22};

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.

1// npm
2npm install react-opener react
3
4// yarn
5yarn add react-opener react

Usage

Basic

1import { ReactOpener, ReactToastOpener } from "react-opener";
2
3const ToastStore = ReactToastOpener.createStore();
4const DialogStore = ReactOpener.createStore();
5
6const Container = () => {
7  return (
8    <div>
9      <button
10        type="button"
11        onClick={() => {
12          ToastStore.success("toast !");
13        }}
14      >
15        toast
16      </button>
17      <button
18        type="button"
19        onClick={() => {
20          DialogStore.open({
21            element: ({ close }) => <YourDialog open={true} onClose={close} />,
22          });
23        }}
24      >
25        dialog
26      </button>
27      // Rendered here !
28      <ReactToastOpener store={ToastStore} />
29      <ReactOpener store={DialogStore} />
30    </div>
31  );
32};

useOpener

1import { ReactOpener } from "react-opener";
2
3const Container = () => {
4  const [dialog, opener] = ReactOpener.useOpener();
5
6  return (
7    <div>
8      <button
9        type="button"
10        onClick={() => {
11          dialog.open({
12            element: ({ close }) => <YourDialog open={true} onClose={close} />,
13          });
14        }}
15      >
16        dialog
17      </button>
18      {opener}
19    </div>
20  );
21};