react-day-picker
Version:
Customizable Date Picker for React
38 lines (33 loc) • 1.38 kB
text/typescript
import { useState } from "react";
export type DispatchStateAction<T> = React.Dispatch<React.SetStateAction<T>>;
/**
* A custom hook for managing both controlled and uncontrolled component states.
*
* This hook allows a component to support both controlled and uncontrolled
* states by determining whether the `controlledValue` is provided. If it is
* undefined, the hook falls back to using the internal state.
*
* @example
* // Uncontrolled usage
* const [value, setValue] = useControlledValue(0, undefined);
*
* // Controlled usage
* const [value, setValue] = useControlledValue(0, props.value);
*
* @template T - The type of the value.
* @param defaultValue The initial value for the uncontrolled state.
* @param controlledValue The value for the controlled state. If undefined, the
* component will use the uncontrolled state.
* @returns A tuple where the first element is the current value (either
* controlled or uncontrolled) and the second element is a setter function to
* update the value.
*/
export function useControlledValue<T>(
defaultValue: T,
controlledValue: T | undefined
): [T, DispatchStateAction<T>] {
const [uncontrolledValue, setValue] = useState(defaultValue);
const value =
controlledValue === undefined ? uncontrolledValue : controlledValue;
return [value, setValue] as [T, DispatchStateAction<T>];
}