DMleadgen
46d973904b
Next.js website for Rocky Mountain Vending company featuring: - Product catalog with Stripe integration - Service areas and parts pages - Admin dashboard with Clerk authentication - SEO optimized pages with JSON-LD structured data Co-authored-by: Cursor <cursoragent@cursor.com>
37 lines
1.3 KiB
Text
37 lines
1.3 KiB
Text
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>];
|
|
}
|