UNPKG

react-day-picker

Version:

Customizable Date Picker for React

38 lines (33 loc) 1.38 kB
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>]; }