Skip to main content

Controlled React Popup

Using open prop#

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

import React, { useState } from 'react';import Warper from './Warper';import Popup from 'reactjs-popup';//
const ControlledPopup = () => {  const [open, setOpen] = useState(false);  const closeModal = () => setOpen(false);  return (    <div>      <button type="button" className="button" onClick={() => setOpen(o => !o)}>        Controlled Popup      </button>      <Popup open={open} closeOnDocumentClick onClose={closeModal}>        <div className="modal">          <a className="close" onClick={closeModal}>            &times;          </a>          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.        </div>      </Popup>    </div>  );};
note

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

Using ref to access Popup actions#

You can use Ref to access to Popup actions open, close, toggle

import React, { useRef } from 'react';import Warper from './Warper';import Popup from 'reactjs-popup';//
const ControlledRefPopup = () => {  const ref = useRef();  const openTooltip = () => ref.current.open();  const closeTooltip = () => ref.current.close();  const toggleTooltip = () => ref.current.toggle();
  return (    <div>      <button type="button" className="button" onClick={openTooltip}>        open      </button>      <button type="button" className="button" onClick={closeTooltip}>        close      </button>
      <button type="button" className="button" onClick={toggleTooltip}>        toggle      </button>      <Popup        ref={ref}        trigger={          <button type="button" className="button">            I am the trigger          </button>        }      >        <div>Lorem ipsum dolor sit</div>      </Popup>    </div>  );};