React-universal-dialog NPM

React Universal Dialog

Makes it easy to create dialogs with React components that have content which you don't have full knowledge of beforehand.

Dialog is always centered, no matter the width/height, and responds to size changes at any moment
Content is is always pixel-perfect aligned to prevent blurry subpixel rendering
Can open multiple dialogs at once

Tested on a wide range of browsers:

Chrome - latest stable
Firefox - latest stable
iOS Safari - latest stable
IE - 9/10/11
~~Edge - latest stable~~ (Not yet, but IE works, so should be safe)

Actual support is even wider, but no testing is done. Feel free to send bug reports.

Usage

import rud = require("react-universal-dialog");

let dialog = new rud.Dialog(<div>Hello, World!</div>);
dialog.open();

API

let d = new Dialog(reactElement, options)

reactElement - Anything that can be passed to ReactDOM.render(). Can be a simple JSX <p>Hello</p>, can be your custom React component <MyComponent />, can be the result of React.createElement().
options - Object (see defaults below) - store: Redux store, destroyOnClose: destroys dialog upon first close, showClose: show a MDL close button, onOpen: event handler for open, onClose: event handler for close

Note: The provided reactElement will be cloned with React.cloneElement() and a new _dialog property will be set to the same pointer that gets returned by new Dialog(). This allows you to easily operate on the dialog from inside the React class, e.g. to close the dialog due to some event.

Note: When the store option is set to a Redux store, then whatever you pass as reactElement will get surrounded with react-redux's <Provider store={store} /> component.

Dialog.defaults = {store: undefined, destroyOnClose: true, showClose: true, onOpen: undefined, onClose: undefined}

The default options object. Feel free to modify its properties to change the default behavior. This can be especially convenient with Redux, as you can specifcy store only once and no need to have a reference to it when actually creating dialogs.