React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. It is a set of react component libraries for enterprise system products. It is a well-thought-out and developer-friendly UI framework.
The checkbox component is used to select one or more values from a set. The ts:ValueType Prop helps to determine whether to select a value from the checkbox group. It can be an array of strings or numbers based on check box values.
Syntax:
type ValueType = string | number;
Step 1: Create a React.js application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e foldername, move into that directory using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install rsuite
Project Structure: The project structure will look like this:
Example: Let’s understand the implementation through the example:
Example 1: In this example, we will use the Checkbox component with a value prop, where we will see what is the syntax of ts:ValueType. In the CheckBox, state array whichever check box fields we add as value will be marked as selected. In this example, the array is empty so by default all the check boxes will be unmarked. CheckBox state is being modified whenever you mark or unmark check box fields.
App.js: Write down the below code in App.js file, where App is our default component provided by React in which code is being written.
Javascript
import React, { useState } from "react";import { Checkbox, CheckboxGroup } from "rsuite";import "rsuite/dist/rsuite.css";const App = () => { // Initializing CheckBox state const [value, setValue] = useState([]); // Array to render CheckBox component // for these fields const checkInputFields = ["Technical", "Non-Technical", "Content Writer", "Content Reviewer"] // Function that will execute when you // select/unselect check box const checkBoxChangeHandler = (value) => { console.log(value, "onChange"); setValue(value); }; return ( <center> <h3>GeeksForGeeks</h3> <h4>Checkbox component</h4> <br /> <CheckboxGroup inline value={value} onChange={(value) => checkBoxChangeHandler(value)} > {checkInputFields.map((checkBoxValue, index) => { return <Checkbox key={index} value={checkBoxValue}>{ checkBoxValue} </Checkbox> })} </CheckboxGroup> </center> );};export default App; |
Steps to run the program: To run the application execute the below command from the root directory of the project:
npm start
Output: Your web application will be live on “http://localhost:3000”.Now, you will see the following output:
Example 2: In this example, we will use the Checkbox component with the value prop. Let us initialize the checkbox state array with two field values, you will see by default those two fields will be marked as selected in the check box. In this example, we have initialized the checkbox state with two values “Technical”, and “Content Writer” respectively. In the output, you will see by default these two check box fields will be marked as selected.
App.js: Write down the below code in App.js file, where App is our default component provided by React in which code is being written.
Javascript
import React, { useState } from "react";import { Checkbox, CheckboxGroup } from "rsuite";import "rsuite/dist/rsuite.css";const App = () => { // Initializing CheckBox state const [value, setValue] = useState(["Technical", "Content Writer"]); // Function that will execute when you // select/unselect check box const checkBoxChangeHandler = (value) => { console.log(value, "onChange"); setValue(value); }; return ( <center> <h3>GeeksForGeeks</h3> <h4>Checkbox component</h4> <br /> <CheckboxGroup inline value={value} onChange={(value) => checkBoxChangeHandler(value)} > <Checkbox value={"Technical"}> Technical </Checkbox> <Checkbox value={"Non-Technical"}> Non-Technical </Checkbox> <Checkbox value={"Content Writer"}> Content Writer </Checkbox> <Checkbox value={"Content Reviewer"}> Content Reviewer </Checkbox> </CheckboxGroup> </center> );};export default App; |
Steps to run the program: To run the application execute the below command from the root directory of the project:
npm start
Output: Your web application will be live on “http://localhost:3000”.Now, you will see the following output:
Reference: https://rsuitejs.com/components/checkbox/#basic
