Usage with ReactDOM.createPortal
Popper.js is smart enough to work even if the popper and reference
elements aren't in the same DOM context.
This means that you can use
ReactDOM.createPortal (or any pre
React 16 alternative) to move the popper component somewhere else in the DOM.
Don't mind tech-related ads? Consider disabling your ad-blocker to help us!
They are small and unobtrusive.
Alternatively, support us on Open Collective!
They are small and unobtrusive.
Alternatively, support us on Open Collective!
This can be useful if you want to position a tooltip inside an
overflow: hidden container that you want to make overflow.
Please note that you can also try strategy: 'fixed' to obtain a similar
effect with less hassle.
import { usePopper } from 'react-popper';
const Example = () => {
const [referenceElement, setReferenceElement] = React.useState(null);
const [popperElement, setPopperElement] = React.useState(null);
const { styles, attributes } = usePopper(referenceElement, popperElement);
return (
<>
<button type="button" ref={setReferenceElement}>
Reference
</button>
{ReactDOM.createPortal(
<div
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
Popper
</div>,
document.querySelector('#destination')
)}
</>
);
};