Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

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.


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

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


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.

d.options - Object

The instance options object. Read-only.

d.isOpen - number

0 - Closed, 1 - Modal

d.ref - any

Reference returned by ReactDOM.render().


Does a proper cleanup of the instance. = true)

Open the dialog.


Close the dialog.

Note: Depending on the destroyOnClose option (true by default), the close() method will also immediately call the destroy() method.


  • React (including ReactDOM)
  • Redux & react-redux - only if the store option is used
  • The current close button depends on MDL being present on the page.


© Copyright 2016 OÜ Nevermore

Licensed under the Apache 2.0 license


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




No releases published


No packages published