useInputCharacterLimit.mdx

name	rank	tagline	sandboxId	previewHeight	relatedHooks
useInputCharacterLimit	51	Track number of input characters typed with useInputCharacterLimit and set your constraint character count.	useinputcharacterlimit-3ckwg2	500px	usekeypress useeventlistener

import CodePreview from "../../components/CodePreview.astro"; import HookDescription from "../../components/HookDescription.astro"; import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

The useInputCharacterLimit hook allows you to track and control the current number of input characters typed inside the form input box. We can set a threshold value for the number of input characters as we desire to set a constraint.

### Parameters

| Name | Type | Description | | ------------ | ------- | ------------------------------------------------- | | currentValue | string | The current state value of the input field. | | maxValue | number | The maximum number of the input field value . | | inputRef | object | The ref object of the input field. |

Return Value

The useInputCharacterLimit hook returns an object containing the following elements:

| Name | Type | Description | | ------------- | ---- | ----------- | | inputValue | string | The current state value of the input field. | | isExceedingCount | boolean | The current state of the exceeded count. | | currentValueLength | number | The length of the current input state value. |

import React, { useRef } from "react";
import { useInputCharacterLimit } from "@uidotdev/usehooks";

export default function App() {
  const inputRef = useRef(null);
  const currentValue = "";
  const maxValue = 20;

  const { inputValue, isExceedingCount, currentValueLength } =
    useInputCharacterLimit(currentValue, maxValue, inputRef);

  return (
    <div className="App">
      <label>
        Comments
      </label>
      <textarea ref={inputRef} value={inputValue} />
      <div className={isExceedingCount ? "red-text" : ""}>
        <span>{currentValueLength}</span>/{maxValue}
      </div>
    </div>
  );
}