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 works for modal only and I think it does not make sense to use controlled popup for tooltip and menu because we need the trigger element to calculate popup position.