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>
);
};