ReactJs: Wrap Semantic UI Modal using Portal "pattern"

Question

I'm trying to wrap Semantic UI Modal component using portal approach described here

Here is my take at it http://jsfiddle.net/mike_123/2wvfjpy9/ I'm running into issue though, when obtaining a DOM reference and Rendering new markup into it there seem to be old reference still maintained.

render: function() {
    return <div className="ui modal"/>; <-- the idea at first was to only return <div/>
},

...

        React.render(<div > <----------- originally this element had className="ui modal", but this.node doesn't seem to overtake the original node reference
                    <i className="close icon"></i>
                    <div className="header">test</div>
                    <div className="content">
                        {props.children}
                    </div>
                </div>, <----------- 
                this.node);

Any pointers how fix this test case http://jsfiddle.net/mike_123/2wvfjpy9/

Azevedo

Answer 1

You will lose correct vertical positioning and probably animations with approaches mentioned above.

Instead, you can just place your modal's component inside your app's root component and call .modal() with detachable: false. With this option, semantic wouldn't make any DOM manipulations and you won't lose your React DOM event listeners.

Example using Webpack/Babel:

import React, { Component } from 'react'
import $ from 'jquery'

if (typeof window !== 'undefined') {
  window.jQuery = $
  require('semantic-ui/dist/semantic.js')
}

class App extends Component {
  state = {
    showModal: false
  }

  _toggleModal = (e) => {
    e.preventDefault()
    this.toggleModalState()
  }

  toggleModalState = () => {
      this.setState({ showModal: !this.state.showModal })  
  }

  render() {
    return (
      <div>
        <a href="" onClick={this._toggleModal}></a>
        {this.state.showModal
          ? <Modal toggleModalState={this.toggleModalState}/>
          : ''}
      </div>
    ) 
  }
}

class Modal extends Component {
  componentDidMount() {   
    $(this.modal)
      .modal({ detachable: false })
      .modal('show')
  }

  componentWillUnmount() {   
    $(this.modal).modal('hide')
  }

  _close = (e) {
    e.preventDefault()
    alert("Clicked")
    this.props.toggleModalState()
  }

  render() {
    return (
      <div ref={(n) => this.modal = n} className="ui modal">
        <div class="content">
          <a onClick={this._close} href="">Click Me</a>
        </div>
      </div>
    )
  }
 }

Katabolism

Answer 2

When you call this.$modal.modal('show'), it will actually restructure your DOM, and React will not be happy about it. Plus, if you try to put control in your modal, the control will not work.

What you should do is to React.render an already shown modal, i.e. a modal with markup as if $('.ui.modal').modal('show') has been called.

Here is my attempt using "React-Portal" to help with rendering a react component at body level. You can still use your method if you prefer.

// modal.jsx
import React, { Component } from 'react';
import Portal from 'react-portal';

class InnerModal extends Component {
  constructor(props) {
    super(props);
    this.state = { modalHeight: 0 };
  }

  componentDidMount() {
    let modalHeight = window.$('#reactInnerModal').outerHeight();
    this.setState({modalHeight: modalHeight});
  }

  render() {
    return (
      <div id='reactInnerModal' className='ui standard test modal transition visible active' style={{'margin-top': - this.state.modalHeight / 2}}>
        <i className='close icon' onClick={this.props.closePortal}></i>
        {this.props.children}
      </div>
    );
  }
}

class Modal extends Component {
  render() {
    let triggerButton = <button className='ui button'>Open Modal</button>;
    return (
      <Portal className='ui dimmer modals visible active page transition' openByClickOn={triggerButton} closeOnEsc={true} closeOnOutsideClick={true}>
        <InnerModal>
          {this.props.children}
        </InnerModal>
      </Portal>
    );
  }
}

export default Modal;

Notice that my modal has already been rendered in the markup.

You can then consume the modal as below:

// index.jsx
import React, { Component } from 'react';
import Modal from './modal';

class ModalDemo extends Component {
  render() {
    return (
      <Modal>
        <div className='header'>
          Profile Picture
        </div>
        <div className='image content'>
          <div className='ui medium image'>
            <img src='http://semantic-ui.com/images/avatar2/large/rachel.png' />
          </div>
          <div className='description'>
            <div className="ui header">We've auto-chosen a profile image for you.</div>
            <p>We've grabbed the following image from the <a href='https://www.gravatar.com' target='_blank'>gravatar</a> image associated with your registered e-mail address.</p>
            <p>Is it okay to use this photo?</p>
          </div>
        </div>
        <div className='actions'>
          <div className='ui black deny button'>
            Nope
          </div>
          <div className='ui positive right labeled icon button'>
            Yep, that's me
            <i className='checkmark icon'></i>
          </div>
        </div>
      </Modal>
    );
  }
}

React.render(<ModalDemo />, document.getElementById('content'));

With this you don't have to hack your way into DOM manipulation with jQuery, and the control in the modal (button, link, etc, to invoke functions) still works.

Hope this help!

Idola

Answer 3

Khanetor answered this question thoroughly and correctly, I just want to contribute one additional tidbit about how to position the Modal. It would be best as a comment, but unfortunately, I don't have the reputation to do so.

Anyways, the first child element of the Portal element needs to be positioned absolutely in order to make the dimmer and resulting modal sit on top of the page content rather than get put beneath it.

First, add style={position:'absolute'} to the Portal declaration in Modal's render method so the dimmer gets set at the top of the page. You end up with:

<Portal className='ui dimmer modals visible active page transition' openByClickOn={triggerButton} closeOnEsc={true} closeOnOutsideClick={true} style={position:'absolute'}>
        <InnerModal>
          {this.props.children}
        </InnerModal>
</Portal>

Next, set the InnerModal's position to relative and decide on a distance from the top of the screen. I used an eighth (or 0.125) of the browser's viewport and got:

class InnerModal extends Component {
    constructor(props){
        super(props);
        this.state = {
            modalId : _.uniqueId('modal_'),
            style: {}
        }
    }

    componentDidMount() {
        this.setState({
            style : {
                position : 'relative',
                top : $(window).height() * 0.125 + 'px'
            }
        });
    }

    render(){
        return (
            <div id={this.state.modalId} className='ui standard modal transition visible active'
                style={this.state.style}>
                <i className='close icon' onClick={this.props.closePortal}></i>
                { this.props.children }
            </div>
        );
    }
}

With those edits made, I've finally got some working modals in React! Hope this is helpful to someone else running into some of the same issues I've been.

Radiosurgery