use-input-state

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} />
    </>
  );
}

function useInputState<T>(
  initialState: T
): [T, (value: null | undefined | T | React.ChangeEvent<any>) => void];