useControllableProp

Determines whether a component prop is controlled or uncontrolled.

Determines whether a component prop is controlled (externally managed) or uncontrolled (internally managed). Useful for building components that support both controlled and uncontrolled usage patterns.

Import#

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

Example#

function TextInput({ prop, onChange, defaultState }) {
  const [state, setState] = React.useState(defaultState);

  // Determine if the component is controlled and get the effective value
  const [isControlled, value] = useControllableProp(prop, state);

  const handleChange = event => {
    if (!isControlled) {
      setState(event.target.value);
    }
    onChange?.(event);
  };

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

API Reference#

Arguments#

Prop	Type	Default
`prop`	`T \| undefined`	`—`
`state`*	`T`	`—`

Returns#

[isControlled: boolean, value: T] — A tuple where the first element indicates whether the prop is controlled, and the second is the effective value.