26 lines
635 B
Markdown
26 lines
635 B
Markdown
# @fluentui/react-positioning
|
|
|
|
A React utilities built on top of [Floating UI](https://floating-ui.com/) for positioning elements in the DOM.
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
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>}
|
|
</>
|
|
);
|
|
};
|
|
```
|