React Rebass es un framework front-end que fue diseñado teniendo en cuenta a React. En este artículo, sabremos cómo usar el componente Checkbox en React Rebass. La casilla de verificación es un componente importante que se requiere en cada desarrollo. Entonces, para crear un componente Checkbox, podemos importar el componente Rebass Checkbox.
El componente de casilla de verificación de formulario se utiliza para crear un componente de entrada de casilla de verificación de formulario accesible y con temas.
Sintaxis:
<Checkbox />
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 React Rebass y forme componentes en su directorio dado.
npm i rebass npm i @rebass/forms
Estructura del proyecto: Tendrá el siguiente aspecto.
Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente Casilla de verificación de formulario.
App.js
import React from "react";
import { Text } from "rebass";
import { Label, Checkbox } from "@rebass/forms";
const gfg = () => {
return (
<div id="gfg">
<Text fontSize={[3, 4, 5]}
fontWeight="bold"
color="green">
Geeksforgeeks
</Text>
<Text fontSize={[1, 2, 3]}
fontWeight="bold"
color="black">
Rebass Checkbox Component
</Text>
<br />
<Label>
<Checkbox
id='gfg'
name='gfg'
/>
Checkbox
</Label>
</div>
);
};
export default gfg;
Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.
npm start
Producción:
Referencia: https://rebassjs.org/forms/checkbox