React Suite CheckPicker Group

0 0 2 minutes read

React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React suite Checkpicker Group. Checkpicker is very useful for selecting multiple items or selecting a group of data items. The data items can be set in groups using the condition key in the data.

Syntax:

import { CheckPicker } from "rsuite";

Function App() {
    return (
         <CheckPicker value={value} 
               onChange={setValue} data={data} 
               groupBy="role" sort={...} />
    );
}

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Example 1: Below example demonstrates the grouping of items in the checkpicker component.

Javascript

import "rsuite/dist/rsuite.min.css"; 
import React from "react"; 
import { CheckPicker } from "rsuite"; 
  
const data = ['Java', 'DSA', 'Web Development', 
    'Android Development'].map( 
        item => ({ 
            label: item, 
            value: item, 
            role: 'Java' === item ?  
                'Programming Language' : 'Courses'
        }) 
    ); 
  
export default function App() { 
    return ( 
        <div> 
            <div style={{ textAlign: "center" }}> 
                <h2>zambiatek</h2> 
                <h4 style={{ color: "green" }}> 
                    React Suite CheckPicker Group 
                </h4> 
            </div> 
              
            <div style={{ padding: 20 }}> 
                <CheckPicker 
                    size="lg"
                    placeholder="Select"
                    data={data} 
                    groupBy="role"
                /> 
            </div> 
        </div> 
    ); 
}

Output:

Example 2: Below example demonstrates the sorting of items in the checkpicker component.

Javascript

import "rsuite/dist/rsuite.min.css"; 
import React from "react"; 
import { CheckPicker } from "rsuite"; 
  
const data = ['Java', 'C++', 'DSA', 'Web Development', 
    'Android Development'].map( 
        item => ({ 
            label: item, 
            value: item, 
            role: 'Java' === item || 'C++' === item ? 
                'Programming Language' : 'Courses'
        }) 
    ); 
  
function Sorter(a, b) { 
    let firstName = a.toUpperCase(); 
    let secondName = b.toUpperCase(); 
  
    if (firstName < secondName) { 
        return -1; 
    } 
    if (firstName > secondName) { 
        return 1; 
    } 
    return 0; 
} 
  
export default function App() { 
    return ( 
        <div> 
            <div style={{ textAlign: "center" }}> 
                <h2>zambiatek</h2> 
                <h4 style={{ color: "green" }}> 
                    React Suite CheckPicker Group 
                </h4> 
            </div> 
            <div style={{ padding: 20 }}> 
                <CheckPicker 
                    size="lg"
                    placeholder="Select"
                    data={data} 
                    groupBy="role"
                    sort={isGroup => { 
                        if (isGroup) { 
                            return (a, b) => { 
                                return Sorter(a.groupTitle, b.groupTitle); 
                            }; 
                        } 
  
                        return (a, b) => { 
                            return Sorter(a.value, b.value); 
                        }; 
                    }} 
                /> 
            </div> 
        </div> 
    ); 
}

Output:

Reference: https://rsuitejs.com/components/check-picker/#group

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!