Function: useControllableState()

@arolariu/components

---

@arolariu/components / useControllableState

Function: useControllableState()

useControllableState<T>(options): [T, (value) => void]

Defined in: hooks/useControllableState.tsx:58

Manages state that can be either controlled or uncontrolled.

Type Parameters

T

T

The type of the state value.

Parameters

options

UseControllableStateOptions<T>

Configuration object for controllable state.

Returns

[T, (value) => void]

A tuple containing the current state value and a setter function.

Remarks

This hook enables components to support both controlled and uncontrolled patterns seamlessly. When a controlled value is provided, it takes precedence; otherwise, the hook manages internal state initialized with defaultValue.

Example

function CustomInput({value, defaultValue = "", onChange}) {
  const [internalValue, setValue] = useControllableState({
    controlled: value,
    defaultValue,
    onChange,
  });

  return (
    <input
      type="text"
      value={internalValue}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}