useInputState

useInputState es un Hook de React que gestiona el estado de un campo de entrada con una transformación opcional del valor. El controlador onChange que devuelve funciona tanto con elementos <input> como con elementos <textarea>.

Interfaz

function useInputState(
  initialValue: string | (() => string) = '',
  transformValue: (value: string) => string = (v: string) => v
): [
  value: string,
  onChange: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>,
];

Parámetros

• initialValuestring | (() => string)
  

  El valor inicial del campo de entrada. El valor predeterminado es una cadena vacía ("").

• transformValue(value: string) => string
  

  Una función para transformar el valor del campo de entrada. La función predeterminada es una función identidad que devuelve el valor sin cambios.

Valor de retorno

• [value: string, onChange: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>]
  

  Una tupla que contiene:

  • valuestring
    

    El valor actual del estado.

  • onChangeChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
    

    Una función para actualizar el estado.

Ejemplo

function Example() {
  const [value, onChange] = useInputState('');
  return (
    <>
      <input type="text" value={value} onChange={onChange} />
      <textarea value={value} onChange={onChange} />
    </>
  );
}