diff --git a/README.md b/README.md index 8b5a1c6..dd066e6 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,8 @@ A lightweight library that provides two essential custom hooks for your react or - **`useInterval`**: Set up recurring functions at specified intervals. - **`useTimeout`**: Delay execution of a function for a specified time. - **`useDebouncedValue`**: Debounce a value, updating it after a specified delay. +- **`useThrottledValue`**: Throttle a value, ensuring it updates only once within the specified delay period. +- **`usePrevious`**: Capture and store the previous value of a state or prop. ## Installation @@ -103,6 +105,68 @@ const SearchComponent = () => { }; ``` +### useThrottledValue: + +#### Syntax: + +``` +const throttledValue = useThrottledValue(value, delay); +``` + +#### Example + +``` +import { useThrottledValue } from '@shurutech/react-hook-tools'; + +function ThrottleTestComponent() { + const [inputValue, setInputValue] = React.useState(""); + const throttledValue = useThrottle(inputValue, 1000); + + return ( +
+

useThrottledValue Hook Test

+ setInputValue(e.target.value)} + /> +

Immediate Value: {inputValue}

+

Throttled Value (updates every 1000ms): {throttledValue}

+
+ ); +} + +export default ThrottleTestComponent; +``` + +### usePrevious: + +#### Syntax: + +``` +const previousValue = usePrevious(value); +``` + +#### Example + +``` +import { usePrevious } from '@shurutech/react-hook-tools'; + +const PreviousValueComponent = () => { + const [count, setCount] = React.useState(0); + const previousCount = usePrevious(count); + + return ( +
+

Current Count: {count}

+

Previous Count: {previousCount}

+ +
+ ); +}; +``` + ## How to Contribute 1. Fork this repository to your GitHub account and clone it locally. diff --git a/src/hooks/usePrevious.js b/src/hooks/usePrevious.js new file mode 100644 index 0000000..d329cfd --- /dev/null +++ b/src/hooks/usePrevious.js @@ -0,0 +1,11 @@ +import { useRef, useEffect } from 'react'; + +export function usePrevious(value) { + const ref = useRef(); + + useEffect(() => { + ref.current = value; + }, [value]); + + return ref.current; +} \ No newline at end of file diff --git a/src/hooks/useThrottledValue.js b/src/hooks/useThrottledValue.js new file mode 100644 index 0000000..6a6a058 --- /dev/null +++ b/src/hooks/useThrottledValue.js @@ -0,0 +1,23 @@ +import { useState, useEffect, useRef } from "react"; + +export function useThrottledValue(value, delay) { + const [throttledValue, setThrottledValue] = useState(value); + const lastExecuted = useRef(Date.now()); + + useEffect(() => { + const handler = setTimeout(() => { + const timeSinceLastExecution = Date.now() - lastExecuted.current; + + if (timeSinceLastExecution >= delay) { + setThrottledValue(value); + lastExecuted.current = Date.now(); + } + }, delay - (Date.now() - lastExecuted.current)); + + return () => { + clearTimeout(handler); + }; + }, [value, delay]); + + return throttledValue; +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 0f45f06..47e5b2f 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,7 @@ import { useInterval } from "./hooks/useInterval"; import { useTimeout } from "./hooks/useTimeout"; import { useDebouncedValue } from "./hooks/useDebouncedValue"; +import { useThrottledValue } from "./hooks/useThrottledValue"; +import { usePrevious } from "./hooks/usePrevious"; -export {useInterval,useTimeout,useDebouncedValue} \ No newline at end of file +export {useInterval,useTimeout,useDebouncedValue, usePrevious, useThrottledValue} \ No newline at end of file