Examples
Popover selection

Popover Selection

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