use-uncontrolled

Manage state of both controlled and uncontrolled components
Import

Usage

use-uncontrolled hook allows you to manage state for both controlled and uncontrolled components:

import { useUncontrolled } from '@mantine/hooks';
function CustomInput({ value, defaultValue, onChange }) {
const [_value, handleChange] = useUncontrolled({
value,
defaultValue,
finalValue: 'Final',
onChange,
});
return (
<input
type="text"
value={_value}
onChange={(event) => handleChange(event.currentTarget.value)}
/>
);
}

TypeScript

Set value type

By default, hook will set type automatically, but you can provide your own type:

useUncontrolled<number>({
value: 10,
defaultValue: 5,
finalValue: 20,
onChange: (val) => console.log(val > 10),
});

Definition

interface UseUncontrolledInput<T> {
/** Value for controlled state */
value?: T;
/** Initial value for uncontrolled state */
defaultValue?: T;
/** Final value for uncontrolled state when value and defaultValue are not provided */
finalValue?: T;
/** Controlled state onChange handler */
onChange?(value: T): void;
}
function useUncontrolled<T>(input: UseUncontrolledInput<T>): [
T, // current value
(value: T) => void, // onChange function
boolean // value that indicates if input is controlled or not
];