@fluentui/react-positioning
A React utilities built on top of Floating UI for positioning elements in the DOM.
Usage
import * as React from 'react';
import { usePositiniong } from '@fluentui/react-positioning';
const PopupExample: React.FC = ({ children }) => {
const { targetRef, containerRef } = usePositiniong();
const [open, setOpen] = React.useState(false);
const onClick = () => setOpen(s => !s);
return (
<>
<button ref={targetRef} onClick={onClick}>
Toggle popup
</button>
{open && <div ref={containerRef}>{children}</div>}
</>
);
};