Added new hook to control the input limit value

usehooks.com/.astro/types.d.ts

@@ -311,6 +311,13 @@ declare module 'astro:content' {
  collection: "hooks";
  data: InferEntrySchema<"hooks">
 } & { render(): Render[".mdx"] };
+"useInputCharacterLimit.mdx": {
+ id: "useInputCharacterLimit.mdx";
+ slug: "useinputcharacterlimit";
+ body: string;
+ collection: "hooks";
+ data: InferEntrySchema<"hooks">
+} & { render(): Render[".mdx"] };
 "useIntersectionObserver.mdx": {
  id: "useIntersectionObserver.mdx";
  slug: "useintersectionobserver";

usehooks.com/src/content/hooks/useInputCharacterLimit.mdx

@@ -0,0 +1,78 @@
+---
+name: useInputCharacterLimit
+rank: 51
+tagline: Track number of input characters typed with useInputCharacterLimit and set your constraint character count.
+sandboxId: useinputcharacterlimit-3ckwg2
+previewHeight: 500px
+relatedHooks:
+ - usekeypress
+ - useeventlistener
+---
+
+import CodePreview from "../../components/CodePreview.astro";
+import HookDescription from "../../components/HookDescription.astro";
+import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
+
+<HookDescription name={frontmatter.name}>
+ 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.
+</HookDescription>
+
+<div class="reference">
+ ### Parameters
+
+ <div class="table-container">
+ | 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. |
+ </div>
+
+ ### Return Value
+
+ The `useInputCharacterLimit` hook returns an object containing the following elements:
+
+ <div class="table-container">
+ | 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. |
+ </div>
+</div>
+
+<CodePreview
+ sandboxId={frontmatter.sandboxId}
+ previewHeight={frontmatter.previewHeight}
+/>
+
+<StaticCodeContainer>
+
+```jsx
+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>
+ );
+}
+```
+
+</StaticCodeContainer>