React-use-caret-position NPM

Live demo: https://react-use-caret-position.netlify.app

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.

Install

With npm...

npm install react-use-caret-position

With yarn...

yarn add react-use-caret-position

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;

API

const { ref, start, end, updateCaret } = useCaretPosition();

Return Object

Key	Type	Description
`ref`	`React.RefObject`	Ref that should be assigned to your input
`start`	`number`	Current start position of the text selection
`end`	`number`	Current end position of the text selection
`updateCaret`	`() => void`	Function to set the caret position