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';
function WithUseInputState() {
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} />
</>
);
}
function WithUseState() {
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];