React Caret Position Hook

usage-example.tsx

// Usage example of useCaretPosition
// Shows a red caret when the cursor is at the end

import { useCaretPosition } from "./use-caret-position"

export function SomeComponent () {
  const [value, setValue] = React.useState<string>("");
    
  // actual usage
  const inputRef = React.useRef<HTMLInputElement>(null);
  const { selection, handleSelect } = useCaretPosition(inputRef);
    
  // make caret red when it's at the end
  const isCaretAtLastPosition =
    selection.start === selection.end && selection.start === props.value.length;
    
  return (
    <input
      ref={inputRef}
      type="text"
      value={props.value}
      onSelect={handleSelect}
      style={{
        caretColor: isCaretAtLastPosition ? "red" : "inherit",
      }}
    />
  )
}

use-caret-position.tsx

/**
 * A React which returns the current caret position inside an input
 */
export function useCaretPosition<T extends HTMLInputElement>(
  inputRef: React.RefObject<T>
) {
  const [selection, setSelection] = React.useState<{
    start: HTMLInputElement["selectionStart"];
    end: HTMLInputElement["selectionEnd"];
    direction: HTMLInputElement["selectionDirection"];
  }>({
    start: 0,
    end: 0,
    direction: "none",
  });

  React.useEffect(() => {
    if (!inputRef.current) return;
    setSelection({
      start: inputRef.current.selectionStart || 0,
      end: inputRef.current.selectionEnd || 0,
      direction: inputRef.current.selectionDirection || "none",
    });
  }, []);

  return {
    selection,
    handleSelect: (event: React.SyntheticEvent<T, Event>) => {
      setSelection({
        start: (event.target as T).selectionStart || 0,
        end: (event.target as T).selectionEnd || 0,
        direction: (event.target as T).selectionDirection || "none",
      });
    },
  };
}