useTextSelection

Track user text selection based on document.getSelection

useTextSelection listens for selectionchange events on the document and returns the current Selection object (or null if nothing is selected). The returned object updates reactively whenever the user selects, modifies, or clears a text selection anywhere on the page. You can call .toString() on the result to get the selected text as a string.

When to Use

• Building annotation or highlighting tools that respond to user text selections
• Displaying floating toolbars (bold, italic, link) when the user selects text in an editor
• Tracking selected text for search, copy, or share-to-social features

Notes

• Document-wide: The hook tracks selections across the entire document, not a specific element. Filter by checking the selection’s anchor or focus node if you need element-scoped behavior.
• Browser-only: document.getSelection is not available during SSR. The hook returns null on the server.
• The returned Selection object is a live reference from the browser; its properties update in place between re-renders.

Usage

function Demo() {
  const selection = useTextSelection();

  return (
    <div style={{ padding: 40 }}>
      <p>
        Select some text here or anywhere on the page and it will be displayed
        below
      </p>

      <div>Selected text: {selection?.toString()}</div>
    </div>
  );
};

API

useTextSelection

Returns

Selection | null: selected text object

Arguments