use-uncontrolled

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

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

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
];