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> props. <Checkpicker> component is used to select multiple options or to select a group of data items.
Checkpicker Props:
- appearance: It is used for the component appearance.
- block: It is used to block an entire row.
- classPrefix: It denotes the prefix of the component CSS class.
- cleanable: It indicates whether the option can be emptied or not.
- container: It is used to set the rendering container.
- data: It denotes the selectable data.
- defaultValue: It denotes the default value.
- disabled: It indicates whether the component is disabled or not.
- disabledItemValues: It is used to disable optional.
- groupBy: It is used to set the grouping criteria ‘key’ in ‘data’.
- labelKey: It is used to set the options to display the ‘key’ in ‘data’.
- listProps: It denotes the list-related properties in react-virtualized.
- menuMaxHeight: It is used to set the max height of the Dropdown.
- menuClassName: It denotes a CSS class to apply to the Menu DOM node.
- menuStyle: It denotes a style to apply to the Menu DOM node.
- onChange: It is a callback function that is triggered when the value changes.
- onClean: It is a callback function that is triggered when the value is clean.
- onClose: It is a callback function that is triggered on a close event.
- onEnter: It is a callback function that is triggered before the overlay transitions in.
- onEntered: It is a callback function that is triggered after the overlay finishes transitioning in.
- onEntering: It is a callback function that is triggered as the overlay begins to transition in.
- onExit: It is a callback function that is triggered right before the overlay transitions out.
- onExited: It is a callback function that is triggered after the overlay finishes transitioning out.
- onExiting: It is a callback function that is triggered as the overlay begins to transition out.
- onGroupTitleClick: Click the callback function for the group header.
- onOpen: It is a callback function that is triggered on open of the component.
- onSearch: It is a callback function for the search.
- onSelect: It is a callback function that is triggered on the selection of an option.
- placeholder: It denotes the placeholder.
- placement: It is used for the placement of components.
- preventOverflow: It is used to prevent floating element overflow.
- renderExtraFooter: It is used for the custom render extra footer.
- renderMenu: It is used for customizing the Rendering Menu list.
- renderMenuGroup: It is used for the custom Render Options Group.
- renderMenuItem: It is used for the custom Render Options.
- renderValue: It is used for the custom Render selected options.
- searchBy: It is used for the custom search rules.
- searchable: It indicates whether you can search for options or not.
- size: It denotes the picker size.
- sort: It is used for the sort options.
- sticky: It is used to position the top of the selected option in the options.
- toggleAs: It can be used for the custom element for this component.
- value: It denotes the value (Controlled).
- valueKey: It is used to set the option value ‘key’ in ‘data’.
- virtualized: It indicates whether to use Virtualized List or not.
- caretAs: It adds a Custom component for the caret icon.
Syntax:
import { CheckPicker } from "rsuite";
Function App() {
return (
<CheckPicker value={value} onChange={setValue} data={data} />
);
}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 data, size, appearance, and placeholder checkpicker props.
Javascript
import "rsuite/dist/rsuite.min.css";
import { CheckPicker } from "rsuite/";
export default function App() {
// Sample courses data
const data = [{
"label": "Sorting",
"value": "Sorting",
},
{
"label": "Searching",
"value": "Searching",
},
{
"label": "Greedy",
"value": "Greedy",
},
{
"label": "Dynamic Programming",
"value": "DP",
},
{
"label": "Backtracking",
"value": "Backtracking",
},
]
return (
<center>
<div>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite CheckPicker Props
</h4>
<div style={{ marginTop: 20, width: 800 }}>
<CheckPicker
data={data}
size="lg"
appearance="subtle"
placeholder="Select Algorithms"
/>
</div>
</div>
</center>
);
} |
Output:
Example 2: Another example demonstrating the sticky, defaultValue, and disabledOptionValues checkpicker props.
Javascript
import "rsuite/dist/rsuite.min.css";
import { CheckPicker } from "rsuite/";
export default function App() {
// Sample courses data
const data = [{
"label": "Sorting",
"value": "Sorting",
},
{
"label": "Searching",
"value": "Searching",
},
{
"label": "Greedy",
"value": "Greedy",
},
{
"label": "Dynamic Programming",
"value": "DP",
},
{
"label": "Backtracking",
"value": "Backtracking",
},
]
return (
<center>
<div>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite CheckPicker Props
</h4>
<div style={{ marginTop: 20, width: 800 }}>
<CheckPicker
sticky
data={data}
defaultValue={['Greedy', 'Sorting']}
disabledItemValues={['Backtracking']}
placeholder="Select Algorithms"
/>
</div>
</div>
</center>
);
} |
Output:
Reference: https://rsuitejs.com/components/check-picker/#code-lt-check-picker-gt-code