diff --git a/usehooks.com/.astro/types.d.ts b/usehooks.com/.astro/types.d.ts index 5e8b681..61a80e8 100644 --- a/usehooks.com/.astro/types.d.ts +++ b/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"; diff --git a/usehooks.com/src/content/hooks/useInputCharacterLimit.mdx b/usehooks.com/src/content/hooks/useInputCharacterLimit.mdx new file mode 100644 index 0000000..3f09ae1 --- /dev/null +++ b/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"; + + + 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. | +
+
+ + + + + +```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 ( +
+ +