use-input-state

Manage state of native and custom inputs
Import

Usage

use-input-state hook handles state of native inputs (with event in onChange handler) and custom inputs (with value in onChange handler). Hook works with all Mantine and native inputs:

import { useState } from 'react';
import { useInputState } from '@mantine/hooks';
import { TextInput, NumberInput } from '@mantine/core';
// With useInputState
function Demo() {
const [stringValue, setStringValue] = useInputState('');
const [numberValue, setNumberValue] = useInputState(0);
return (
<>
<input type="text" value={stringValue} onChange={setStringValue} />
<TextInput value={stringValue} onChange={setStringValue} />
<NumberInput value={numberValue} onChange={setNumberValue} />
</>
);
}
// With useState
function Demo() {
const [stringValue, setStringValue] = useState('');
const [numberValue, setNumberValue] = useState(0);
return (
<>
<input
type="text"
value={stringValue}
onChange={(event) => setStringValue(event.currentTarget.value)}
/>
<TextInput
value={stringValue}
onChange={(event) => setStringValue(event.currentTarget.value)}
/>
<NumberInput value={numberValue} onChange={setNumberValue} />
</>
);
}

Definition

function useInputState<T>(
initialState: T
): [T, (value: null | undefined | T | React.ChangeEvent<any>) => void];
Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback