Skip to content

How to create a React Modal(which is append to “) with transitions?

There is a modal in this answer which is creating a React-based Modal by appending it to <body>. However, I found it not compatible with the transition addons provided by React.

How to create one with transitions(during enter and leave)?


At react conf 2015, Ryan Florence demonstrated using portals. Here’s how you can create a simple Portal component…

var Portal = React.createClass({
  render: () => null,
  portalElement: null,
  componentDidMount() {
    var p = this.props.portalId && document.getElementById(this.props.portalId);
    if (!p) {
      var p = document.createElement('div'); = this.props.portalId;
    this.portalElement = p;
  componentWillUnmount() {
  componentDidUpdate() {
    React.render(<div {...this.props}>{this.props.children}</div>, this.portalElement);

and then everything you can normally do in React you can do inside of the portal…

    <Portal className="DialogGroup">
       <ReactCSSTransitionGroup transitionName="Dialog-anim">
         { activeDialog === 1 && 
            <div key="0" className="Dialog">
              This is an animated dialog
            </div> }

jsbin demo

You can also have a look at Ryan’s react-modal, although I haven’t actually used it so I don’t know how well it works with animation.