jiyinyiyong jiyinyiyong - 1 year ago 170
React JSX Question

How to create a React Modal(which is append to `<body>`) with transitions?

There already a modal in this anwser http://stackoverflow.com/a/26789089/883571 which is creating a React-based Modal by appending it to

. However, I found it not competible with the transition addons provided by React.

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

Answer Source

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');
      p.id = 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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download