Hooks
useControlledState
Hook for managing controlled and uncontrolled component state with a unified API.
useControlledState
A hook that provides a unified API for components that need to support both controlled and uncontrolled usage patterns.
Import
import { useControlledState } from '@mks2508/mks-ui/react';Basic Usage
function Toggle({ checked, defaultChecked, onCheckedChange }) {
const [isChecked, setIsChecked] = useControlledState({
value: checked,
defaultValue: defaultChecked ?? false,
onChange: onCheckedChange,
});
return (
<button onClick={() => setIsChecked(!isChecked)}>
{isChecked ? 'On' : 'Off'}
</button>
);
}Controlled Usage
When value is provided, the component is controlled:
const [open, setOpen] = useState(false);
<Toggle checked={open} onCheckedChange={setOpen} />Uncontrolled Usage
When value is undefined, it falls back to internal state:
<Toggle defaultChecked={true} />API Reference
Parameters
| Property | Type | Description |
|---|---|---|
value | T | undefined | Controlled value (if provided, component is controlled) |
defaultValue | T | Initial value for uncontrolled mode |
onChange | (value: T) => void | Called when value changes |
Return Value
[T, (value: T) => void] — Tuple of current value and setter function, matching useState signature.