React Suite CheckPicker Group

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>GeeksforGeeks</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>GeeksforGeeks</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