38 lines
857 B
TypeScript
38 lines
857 B
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { Input } from "../ui/input";
|
|
|
|
export default function DebouncedInput({
|
|
value: initialValue,
|
|
onChange,
|
|
debounce = 500,
|
|
...props
|
|
}: {
|
|
value: string | number;
|
|
onChange: (value: string | number) => void;
|
|
debounce?: number;
|
|
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">) {
|
|
const [value, setValue] = useState(initialValue);
|
|
|
|
useEffect(() => {
|
|
setValue(initialValue);
|
|
}, [initialValue]);
|
|
|
|
useEffect(() => {
|
|
const timeout = setTimeout(() => {
|
|
onChange(value);
|
|
}, debounce);
|
|
|
|
return () => clearTimeout(timeout);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [value]);
|
|
|
|
return (
|
|
<Input
|
|
className="m-4 w-[300px]"
|
|
{...props}
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
/>
|
|
);
|
|
}
|