daphnis/components/scoreplaylog/DebouncedInput.tsx

38 lines
857 B
TypeScript
Raw Normal View History

2024-08-21 17:34:23 +00:00
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]"
2024-08-21 17:34:23 +00:00
{...props}
value={value}
onChange={(e) => setValue(e.target.value)}
/>
);
}