/reactuse

useTextSelection

Tracks text selection details.

Usage

import { useTextSelection } from "@siberiacancode/reactuse";

const selection = useTextSelection();

Example

import { useTextSelection } from "@siberiacancode/reactuse";

export const SelectedText = () => {
  const selection = useTextSelection();
  return (
    <span>
      {selection.text ? `Selected: ${selection.text}` : "Select text"}
    </span>
  );
};

Notes

• Hook uses the document.getSelection API.

Type Declarations

export interface UseTextSelectionReturn {
  ranges: Range[];
  rects: DOMRect[];
  selection: Selection | null;
  text: string;
}
export declare const useTextSelection: () => UseTextSelectionReturn;