useControllableValue
In some components, we need the state to be managed by itself or controlled by it's parent. useControllableValue is a Hook that helps you manage this kind of state.
Overview
In some components, we need the state to be managed by itself or controlled by it's parent. useControllableValue is a Hook that helps you manage this kind of state.
Installation
Open inpnpm dlx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useControllableValue.jsonnpx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useControllableValue.jsonyarn shadcn@latest add https://shadcn-ahooks.vercel.app/r/useControllableValue.jsonbun shadcn@latest add https://shadcn-ahooks.vercel.app/r/useControllableValue.jsonIn some components, we need the state to be managed by itself or controlled by it's parent. useControllableValue is a Hook that helps you manage this kind of state.
Examples
Uncontrolled component
Controlled component
No value, have onChange component
API
const [state, setState] = useControllableValue(props: Record<string, any>, options?: Options);Result
| Property | Description | Type |
|---|---|---|
| state | State | - |
| setState | Set state | (value: any | ((prevState: any) => any)) => void |
Params
| Property | Description | Type | Default |
|---|---|---|---|
| props | Component props | Record<string, any> | - |
| options | Optional configuration | Options | - |
Options
| Property | Description | Type | Default |
|---|---|---|---|
| defaultValue | The default value, will be overridden by props.defaultValue and props.value | - | - |
| defaultValuePropName | Custom defaultValue attribute name | string | defaultValue |
| valuePropName | Custom value attribute name | string | value |
| trigger | Custom trigger attribute name | string | onChange |