Interaction

Showing the popoverCopy Anchor Link

When the user selects with a mouse or pen, the popover appears after they release it. Set showWhileSelecting to show and update the popover during the drag instead.

Keyboard selections show the popover immediately. minSelectionLength sets the minimum number of characters, not counting whitespace at either end.

Interacting with the popoverCopy Anchor Link

Clicking inside the popover keeps it open, so its buttons work even when the click clears the selection. Selecting text inside the popover doesn't move it.

Dismissing the popoverCopy Anchor Link

The popover hides when the selection becomes empty or moves outside the wrapper.

Pressing Escape also hides it, until the selection changes. Set closeOnEscape={false} to turn this off.

Controlling the popoverCopy Anchor Link

setShowPopover from useHighlightPopover shows or hides the popover. Hiding it works like Escape, so the popover stays hidden until the selection changes.

function Popover() {
  const { setShowPopover } = useHighlightPopover();

  return <button onClick={() => setShowPopover(false)}>Done</button>;
}

CallbacksCopy Anchor Link

Callbacks can be inline functions. The component always calls the latest version, and a new function on each render doesn't fire extra callbacks.