jiyinyiyong jiyinyiyong - 3 months ago 48
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)?


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.