react-use-caret-position

Custom React hook to keep track of the caret position in an input.

Built with:

react
typescript

Motivation

If there is some side effect/async code in an input's onChange event handler (e.g. dispatching a Redux action without doing anything else, format text in some way like uppercase, etc), the caret will annoyingly be booted to the end of the input after each keystroke.

react-use-caret-position fixes this undesirable behavior by keeping track of the caret position and setting it on render.

Example Usage

import React, { useState } from 'react';
import { useCaretPosition } from 'react-use-caret-position';
const Input = () => {
  const [text, setText] = useState('hello world');
  const { ref, updateCaret } = useCaretPosition();
  const handleChange = e => {
    // Some side effect in the `onChange` handler (could be anything)
    const inputToUpperCase = e.target.value.toUpperCase();
    setText(inputToUpperCase);
    // Track the caret position with the hook
    updateCaret();
  };
  return <input ref={ref} value={value} onChange={handleChange} />;
};
export default Input;

Motivation#

Example Usage#

Motivation

Example Usage