useControllableState

Hook that manages both controlled and uncontrolled state patterns

state

medium

test coverage

Last changed: 5 days ago

Installation

Library

CLI

Manual

import { useControllableState } from '@siberiacancode/reactuse';

Usage

const [value, setValue, isControlled] = useControllableState({ initialValue: 'initial' });

Demo

source

Api

Parameters

Name	Type	Default	Note
options.value?	Value	-	The controlled value. When provided, the component becomes controlled
options.initialValue?	Value	-	The initial value for uncontrolled state
options.onChange?	(value: Value) => void	-	The callback function called when the state changes

Returns

UseControllableStateReturn<Value>

Type declaration

export interface UseControllableStateOptions<Value> {
  /** The initial value for uncontrolled state */
  initialValue?: Value;
  /** The controlled value */
  value?: Value;
  /** The onChange callback */
  onChange?: (value: Value) => void;
}

export type UseControllableStateReturn<Value> = [
  /** Current value */
  value: Value,
  /** Setter function that works with both controlled and uncontrolled state */
  setValue: (nextValue: ((prevValue: Value) => Value) | Value) => void,
  /** Whether the state is controlled */
  isControlled: boolean
];

Source

Source • Demo

Contributors

D

debabin