Typix LogoTypix
CoreHooks

useRange

Access the current DOM selection range

useRange returns the current DOM Range object corresponding to the editor's selection. Useful for positioning custom UI relative to the selection.

Import

import { useRange } from '@typix-editor/react';

Usage

function SelectionInfo() {
  const { range } = useRange();

  if (!range) return null;

  const rect = range.getBoundingClientRect();
  return (
    <div style={{ position: 'absolute', top: rect.bottom, left: rect.left }}>
      Selection at ({Math.round(rect.x)}, {Math.round(rect.y)})
    </div>
  );
}

Using the ref for non-reactive access

const { rangeRef } = useRange();

function handleClick() {
  const currentRange = rangeRef.current;
  if (currentRange) {
    // Use range without causing re-render
  }
}

Return value

PropertyTypeDescription
rangeRange | nullThe current DOM selection range (reactive)
rangeRefRefObject<Range | null>Ref to the current range (non-reactive)

Behavior

  • Returns null when the selection is collapsed (cursor with no selection)
  • Updates on every editor state change
  • Ignores collaboration-related selection updates
  • Creates a DOM Range from the Lexical selection's anchor and focus nodes

useActiveFormats

Reactive hook for tracking active text format state

useMouseListener

Listen for global mouse up and down events

On this page

ImportUsageUsing the ref for non-reactive accessReturn valueBehavior