useTimeout
A custom hook that sets up a timeout to call a callback function after a specified delay.
Installation
pnpm dlx shadcn@latest add @reactusekit/use-timeoutUsage
import { useTimeout } from "@/hooks/use-timeout"
import { useState } from "react"
function DelayedMessage() {
const [showMessage, setShowMessage] = useState(false)
const [isActive, setIsActive] = useState(true)
useTimeout(
() => {
setShowMessage(true)
},
isActive ? 3000 : null
)
return (
<div>
{showMessage ? (
<p>This message appeared after 3 seconds!</p>
) : (
<p>Waiting for message...</p>
)}
<button onClick={() => setIsActive(!isActive)}>
{isActive ? "Cancel" : "Start"} Timeout
</button>
<button onClick={() => setShowMessage(false)}>Reset</button>
</div>
)
}Pass null as the delay to cancel the timeout. The hook automatically cleans
up the timeout when the component unmounts.
API
Parameters
| Parameter | Type | Description |
|---|---|---|
callback | () => void | The function to be called after the delay |
delay | number | null | The time in milliseconds before calling the function. If null, the timeout is cancelled |
Returns
This hook doesn't return anything.