React Popup Component - Modals,Tooltips and Menus —  All in one

travisnpmnpm trendsgithub
github contributorspull requests are welcomecode of conduct
watchersgithub starstweet

Controlled React Popup

As we already mentioned in the Component API section, you can create a controlled Popup component by using the open prop like the following :

/* react-live */

class ControlledPopup extends React.Component {
  constructor(props) {
    this.state = { open: false }
    this.openModal = this.openModal.bind(this)
    this.closeModal = this.closeModal.bind(this)

  openModal (){
    this.setState({ open: true })
  closeModal () {
    this.setState({ open: false })

  render() {
    return (
        <button className="button" onClick={this.openModal}>
          Controlled Popup
          <div className="modal">
            <a className="close" onClick={this.closeModal}>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni
            omnis delectus nemo, maxime molestiae dolorem numquam mollitia, voluptate
            ea, accusamus excepturi deleniti ratione sapiente! Laudantium, aperiam
            doloribus. Odit, aut.

render(<ControlledPopup />)

It's important to mention that the controlled Popup work only for modal and I think it's not make sense to be controlled for tooltip and menu because we need the trigger element to calculate popup position.