Popover Selection
Render a Popover after selecting some text.
Render a Popover after selecting some text.
import { Popover } from '@ark-ui/react/popover'
import { usePopoverSelection } from './use-popover-selection'
export const Example = () => {
const { popover, ref } = usePopoverSelection()
return (
<>
<div ref={ref}>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio, sed fuga necessitatibus
aliquid expedita atque? Doloremque ea sequi totam laudantium laboriosam repellat quasi
commodi omnis aut nulla. Numquam, beatae maxime.
</div>
<Popover.RootProvider value={popover}>
<Popover.Positioner>
<Popover.Content>
<Popover.Arrow>
<Popover.ArrowTip />
</Popover.Arrow>
<div>
<button type="button">Save</button>
<button type="button">Edit</button>
<button type="button">Share</button>
</div>
</Popover.Content>
</Popover.Positioner>
</Popover.RootProvider>
</>
)
}