🎣
react-use-caret-position

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

License

MIT © melanieseltzer

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Aaron Ross 💻 📖

Евгений 💻

This project follows the all-contributors specification. Contributions of any kind welcome!