react-dials

Simple dialogs manager based on rxjs

--

Usage

Add dialogs container to your app

import { DialogContainer } from "react-dials";

// render anywhere in your app
<DialogContainer default />

Create a dialog

Then, you can create dialogs from anywhere in your app !

import { dialog } from "react-dials";

const myDialog = dialog(<div className="modal" onClick={myDialog.close}>Hello world !</div>);

Add default basic style

This stylesheet is pretty simple, and you can create your own style instead of importing it !

import "react-dials/dist/index.css";

Advanced configuration

Multiple containers

// render anywhere in your app
<DialogContainer default />
<DialogContainer id="anotherContainer" />

const myDialog = dialog(<div className="modal" onClick={myDialog.close}>Hello world !</div>); // will render in the default container
const mySecondDialog = dialog(<div className="modal" onClick={mySecondDialog.close}>Hello world !</div>, { container: "anotherContainer" }); // will render in the second container

License

MIT © pierrecabriere