A React Typescript hook that tracks user text selections & their screen positions

useTextSelection.ts

import { useEffect, useState } from "react";

type UseTextSelectionReturn = {
  text: string;
  rects: DOMRect[];
  ranges: Range[];
  selection: Selection | null;
};

const getRangesFromSelection = (selection: Selection): Range[] => {
  const rangeCount = selection.rangeCount;
  return Array.from({ length: rangeCount }, (_, i) => selection.getRangeAt(i));
};

const isSelectionInsideRef = (
  selection: Selection,
  ref: React.RefObject<HTMLElement>,
) => {
  if (!ref.current || selection.rangeCount === 0) return true;

  const range = selection.getRangeAt(0);
  return ref.current.contains(range.commonAncestorContainer);
};

export function useTextSelection(
  elementRef?: React.RefObject<HTMLElement>,
): UseTextSelectionReturn {
  const [selection, setSelection] = useState<Selection | null>(null);
  const [text, setText] = useState("");
  const [ranges, setRanges] = useState<Range[]>([]);
  const [rects, setRects] = useState<DOMRect[]>([]);

  useEffect(() => {
    const onSelectionChange = () => {
      const newSelection = window.getSelection();

      if (
        newSelection &&
        (!elementRef || isSelectionInsideRef(newSelection, elementRef))
      ) {
        setSelection(newSelection);
        setText(newSelection.toString());
        const newRanges = getRangesFromSelection(newSelection);
        setRanges(newRanges);
        setRects(newRanges.map((range) => range.getBoundingClientRect()));
      } else {
        setText("");
        setRanges([]);
        setRects([]);
        setSelection(null);
      }
    };

    document.addEventListener("selectionchange", onSelectionChange);

    return () => {
      document.removeEventListener("selectionchange", onSelectionChange);
    };
  }, [elementRef]);

  return {
    text,
    rects,
    ranges,
    selection,
  };
}

nitishmahawar

Here's a rough example:

export const TestComponent = () => {
  const { isListening, transcript, start, stop } = useSpeechToText({
    lang: 'en-US',
    continuous: true,
    interimResults: true,
    maxAlternatives: 1,
  });

  return (
    <>
      <button onClick={isListening ? stop : start}>
        {isListening ? 'Stop' : 'Start'}
      </button>

      <textarea value={transcript} readOnly />
    </>
  );
};

nitishmahawar

Here's a rough example:

export const TestComponent = () => {
  const { isListening, transcript, start, stop } = useSpeechToText({
    lang: 'en-US',
    continuous: true,
    interimResults: true,
    maxAlternatives: 1,
  });

  return (
    <>
      <button onClick={isListening ? stop : start}>
        {isListening ? 'Stop' : 'Start'}
      </button>

      <textarea value={transcript} readOnly />
    </>
  );
};

Thanks for taking the time putting this together @robSturcke!