useControlledComponent
A React Hook that helps you to manage controlled components that receive value and onChange props meeting the following type.
export interface ControlledComponentProps<T> = {
/**
* The value of the controlled component
*/
value: T
/**
* The callback that is called when the value of the controlled component changes
*/
onChange: (eventOrValue: T | { target: { value: T } }) => void
}
Demo
Try to clear the input and type something.
Usage
See API for more details.
Source
Click links below to view source on GitHub.
API
const input = useControlledComponent(initialValue, options)
InitialValue
Initial value of the component, can be a string, number, boolean, object, array etc.
Options
export interface UseControlledComponentOptions<T = string, P extends object = object> extends UseSafeStateOptions {
/**
* The callback that is called when the value of the controlled component changes
*/
onChange?: (value: T, preValue?: T) => void
/**
* The callback that is called when the value of the controlled component is reset
*/
onReset?: (initialValue: T) => void
/**
* The props of the controlled component
*/
props?: P
/**
* The fallback value of the controlled component
*/
fallbackValue?: T
}
Returns
export interface UseControlledComponentReturns<T> {
/**
* The value of the controlled component
*/
value: T
/**
* The props that should be passed to the controlled component
*/
props: ControlledComponentProps<T>
/**
* Reset the value of the controlled component to the initial value
*/
reset(): void
/**
* Set the value of the controlled component
*/
setValue: (value: T) => void
}
