🎣
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!