¿Cómo agregar entrada de código en React.js?

En este artículo, vamos a aprender cómo podemos agregar Code Input 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 código, vamos a utilizar el paquete de entrada de código de reacción. El paquete de entrada de código de reacción nos ayuda a integrar la entrada de código en nuestra aplicación. Primero, instalaremos el paquete de entrada de código de reacción y luego agregaremos una entrada de código 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 de entrada de código de reacción usando el siguiente comando:

npm i react-code-input

Estructura del proyecto: Se verá así.

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

Agregue el siguiente contenido en el archivo App.js :

import React from 'react';
import ReactCodeInput from 'react-code-input';
  
export default function GfgInput() {
  const props = {
    inputStyle: {
      fontFamily: 'monospace',
      margin:  '4px',
      MozAppearance: 'textfield',
      width: '40px',
      borderRadius: '3px',
      fontSize: '14px',
      height: '26px',
      paddingLeft: '7px',
      backgroundColor: 'white',
      color: 'lightskyblue',
      border: '1px solid lightskyblue'
    },
    inputStyleInvalid: {
      fontFamily: 'monospace',
      margin:  '4px',
      MozAppearance: 'textfield',
      width: '40px',
      borderRadius: '3px',
      fontSize: '14px',
      height: '26px',
      paddingLeft: '7px',
      backgroundColor: 'black',
      color: 'red',
      border: '1px solid red'
    }
  }
  
  return (
    <div>
      <h2>GeeksforGeeks React - Code Input</h2>
      <ReactCodeInput type='number' fields={6} {...props}/>
    </div>
  );
}

Explicación: en el ejemplo anterior primero, estamos importando el componente ReactCodeInput y agregando algo de estilo en una nueva variable llamada props. Después de eso, estamos agregando nuestra entrada de código 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: