useControllableState

Manages state that can be either controlled or uncontrolled.

Provides a unified state management API for components that need to support both controlled and uncontrolled modes. It works like useState but can optionally be driven by external props.

Import#

import { useControllableState } from '@volue/wave-react';

Example#

function TextInput({ value: valueProp, defaultValue, onChange }) {
  const [value, setValue] = useControllableState({
    value: valueProp,
    defaultValue,
    onChange
  });

  const handleChange = event => {
    setValue(event.target.value);
  };

  return <input type="text" value={value} onChange={handleChange} />;
}

API Reference#

Arguments#

Prop	Type	Default
`value`	`T`	`—`
`defaultValue`	`T \| (() => T)`	`—`
`onChange`	`(value: T) => void`	`—`

Returns#

[value: T, setValue: Dispatch<SetStateAction<T>>] — A tuple similar to useState, with the current value and a setter function.