¿Cómo agregar AutoSize Input en React.js?

En este artículo, vamos a aprender cómo podemos agregar una entrada de tamaño automático en ReactJs. React es una biblioteca JavaScript front-end gratuita y de código abierto para crear interfaces de usuario o componentes de interfaz de usuario. Es mantenido por Facebook y una comunidad de desarrolladores individuales y empresas.

Enfoque:  para agregar nuestra entrada de tamaño automático, vamos a utilizar el paquete react-input-autosize. El paquete react-input-autosize nos ayuda a integrar la entrada de tamaño automático en nuestra aplicación. Primero, instalaremos el paquete react-input-autosize y luego agregaremos una entrada de tamaño automático en nuestra página de inicio.

Crear aplicación ReactJs: puede crear un nuevo proyecto ReactJs usando el siguiente comando:

npx create-react-app gfg

Instale el paquete requerido: ahora instalaremos el paquete react-input-autosize usando el siguiente comando:

npm i react-input-autosize

Estructura del proyecto: Se verá así.

Agregar la entrada de tamaño automático: después de instalar el paquete, podemos agregar fácilmente una entrada de tamaño automático en cualquier página de nuestra aplicación. Para este ejemplo, vamos a agregar una entrada de tamaño automático a nuestra página de inicio.

Agregue el siguiente contenido en el archivo App.js :

import React, { useState } from 'react';
import AutosizeInput from 'react-input-autosize';
  
export default function GfgInput() {
  const [inputValue, setInput] = useState("");
  return (
    <div>
      <h2>GeeksforGeeks ReactJs - AutoSize Input</h2>
      <AutosizeInput
        name="form-field-name"
        value={inputValue}
        onChange={function(event) {
          setInput(event.target.value) 
        }}
      />
    </div>
  );
}

Explicación: en el ejemplo anterior primero, estamos importando el componente AutosizeInput y el gancho useState de reaccionar. Luego estamos usando el enlace useState para almacenar el valor de la entrada. Después de eso, estamos agregando nuestra entrada usando el paquete instalado.

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm start

Producción: