https://github.com/melanieseltzer/react-use-caret-position

Custom React hook to keep track of the caret position in an input
https://github.com/melanieseltzer/react-use-caret-position

hacktoberfest hooks react react-hooks reactjs typescript

Last synced: about 1 year ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/melanieseltzer/react-use-caret-position
• Owner: melanieseltzer
• License: mit
• Created: 2019-08-22T03:52:24.000Z (almost 7 years ago)
• Default Branch: main
• Last Pushed: 2022-10-24T21:14:22.000Z (almost 4 years ago)
• Last Synced: 2025-04-04T11:47:50.043Z (over 1 year ago)
• Topics: hacktoberfest, hooks, react, react-hooks, reactjs, typescript
• Language: TypeScript
• Homepage: https://react-use-caret-position.netlify.app
• Size: 590 KB
• Stars: 21
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  🎣

  


  react-use-caret-position



[![npm (scoped)](https://img.shields.io/npm/v/react-use-caret-position.svg)](https://www.npmjs.com/package/react-use-caret-position) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)

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...

```bash

npm install react-use-caret-position

```

With yarn...

```bash

yarn add react-use-caret-position

```

## Usage

```js

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 (

    

  );

};

export default Input;

```

## API

```js

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](https://github.com/melanieseltzer)

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    

      
Aaron Ross
💻 📖

      
Евгений
💻

    

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!