mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-19 09:50:15 +01:00
36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
|
import debounce from 'lodash/debounce';
|
||
|
|
import { useState, useCallback } from 'react';
|
||
|
|
import type { TSetOption } from '~/common';
|
||
|
|
|
||
|
|
/** A custom hook that accepts a setOption function and an option key (e.g., 'title').
|
||
|
|
It manages a local state for the option value, a debounced setter function for that value,
|
||
|
|
and returns the local state value, its setter, and an onChange handler suitable for inputs. */
|
||
|
|
function useDebouncedInput(
|
||
|
|
setOption: TSetOption,
|
||
|
|
optionKey: string | number,
|
||
|
|
initialValue: unknown,
|
||
|
|
delay = 450,
|
||
|
|
): [
|
||
|
|
React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>,
|
||
|
|
unknown,
|
||
|
|
React.Dispatch<React.SetStateAction<unknown>>,
|
||
|
|
] {
|
||
|
|
const [value, setValue] = useState(initialValue);
|
||
|
|
|
||
|
|
/** A debounced function to call the passed setOption with the optionKey and new value.
|
||
|
|
*
|
||
|
|
Note: We use useCallback to ensure our debounced function is stable across renders. */
|
||
|
|
const setDebouncedOption = useCallback(debounce(setOption(optionKey), delay), []);
|
||
|
|
|
||
|
|
/** An onChange handler that updates the local state and the debounced option */
|
||
|
|
const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
|
||
|
|
const newValue = e.target.value;
|
||
|
|
setValue(newValue);
|
||
|
|
setDebouncedOption(newValue);
|
||
|
|
};
|
||
|
|
|
||
|
|
return [onChange, value, setValue];
|
||
|
|
}
|
||
|
|
|
||
|
|
export default useDebouncedInput;
|