Complementos de área de texto de la interfaz de usuario semántica de ReactJS

La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza el lenguaje CSS, JQuery predefinido para incorporar en diferentes marcos.

En este artículo, sabremos cómo usar Textarea Addons en ReactJS Semantic UI. Textarea Addons se usa para crear un campo en el que el usuario ingresará algún texto.

Uso

• Min height: Altura mínima del área de texto.
• Filas: podemos hacer un área de texto con un número mínimo de filas.

Sintaxis:

<Textarea />

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando.

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.

  cd foldername

• Paso 3: instale la interfaz de usuario semántica en su directorio dado.

   npm install semantic-ui-react semantic-ui-css

Estructura del proyecto : Se verá como lo siguiente.

Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.

npm start

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar los complementos de Textarea mediante el uso de los complementos de Textarea de la interfaz de usuario semántica de ReactJS.

import React from 'react'
import { TextArea, Form } from 'semantic-ui-react'
  
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = 
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
  
const btt = () => (
<div>
  <br/>
  <Form>
    <TextArea placeholder='GeeksforGeeks' />
  </Form>
</div>
)
    
  export default btt

Producción: 

Ejemplo 2: en este ejemplo, hemos cambiado el tamaño de la fila en el área de texto mediante el uso de complementos de área de texto de IU semántica de ReactJS.

import React from 'react'
import { TextArea, Form } from 'semantic-ui-react'
  
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = "https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
  
const btt = () => (
<div>
  <br/>
  <Form>
    <TextArea rows={1} placeholder='GeeksforGeeks' />
  </Form>
</div>
)
    
  export default btt

Producción:

Referencia: https://react.semantic-ui.com/addons/text-area