Feature: Request for Adding useCharacterCount Hook
- Dominant language
- TypeScript
- Stars
- 23.9k
- Forks
- 2.2k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 55
Description
## Description
I have implemented a new `useCharacterCount` hook inspired by the existing `useCharacterLimit` functionality. This hook helps track the number of characters in real-time within text input fields or rich text editors.
Although `useCharacterLimit` and `useCharacterCount` are not typically used together, an issue arises when both hooks are used simultaneously, causing the following error:
```
ToolbarContext.tsx:100 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
I am currently facing difficulties resolving this issue and would appreciate help fixing it so that both hooks can work together. Also, I would like to ask whether it would be appropriate to submit a pull request for this.
```
You can find the implementation of the `useCharacterCount` hook [here](https://github.com/h1un/lexical/commit/843a8693562a709f3c58dfa8cdb105b1adcdf424).
## Impact
Text Input Validation: Track the number of characters a user types in real-time and display an alert when the character count exceeds a set limit.
Rich Text Editing: Track character count in a rich text editor as users type, which can be useful for applications like document editing.
Form Validation: Dynamically validate form inputs based on character count, ensuring the form is only submitted if the character count is within the allowed range.
I request that the `useCharacterCount` hook be improved to work seamlessly alongside `useCharacterLimit`, resolving the issue when both hooks are used together.
Contributor guide
Assessment
This issue has not been assessed yet.