React Multi Select with Check boxes and Select All option
Give your users to select/deselect all options with a single click in react-multiselect-checkboxes
We can use multi select in React using react-select. We can also use multi select with check boxes using react-multiselect-checkboxes. Let’s add the “Select All” functionality to react-multiselect-checkboxes
We start by adding a dummy option {label: "All", value: "*"} in the options. If the option with the value "*" is selected or deselected we perform our logic of select all and deselect all. We use a state variable selectedOptions to keep a track of the selected options. According to our actions we set the value of the state selectedOptions using the state setter setSelectedOptions.
We initialize the ReactMultiSelectCheckboxes with our options, value custom onChange and an extra function prop setState to store the selected values in our state variable. The initialization looks as follows:
<ReactMultiSelectCheckboxes
options={[{label: "All", value: "*"}, ...options]}
value={selectedOptions}
onChange={onChange}
setState={setSelectedOptions}
/>The onChange functions provides us with two parameters ie.
value : an array of currently selected options ie. the current value
event : an object which has attributes action the action performed which can select-option or deselect-option and option which is the option selected or deselected.
We can use the two parameters to build our functionality for “Select All” functionality.
There are few cases we need to consider to build our functionality.
Case 1: The user selects All. Then we need to set the selected options to all the options.
if (event.action === "select-option" && event.option.value === "*") {
this.setState(this.options);
}Case 2: The user deselects All. Then we need to set the selected options to an empty array.
else if (event.action === "deselect-option" && event.option.value === "*") {
this.setState([]);
}Case 3: The user deselects an option. Then we need to set the selected options by removing the “All” option from the current value.
else if (event.action === "deselect-option") {
this.setState(value.filter(o => o.value !== "*"));
}Case 4: The user selected the last unselected option. Then we need to reselect the “All” option, we do this by setting the selected options to the options value, same as in Case 1.
else if (value.length === this.options.length - 1) {
this.setState(this.options);
}Case 5: The user selected an option. We set the selected options to the current value.
else {
this.setState(value);
}The final onChange functions looks as follows:
function onChange(value, event) {
if (event.action === "select-option" && event.option.value ===
"*") {
this.setState(this.options);
} else if (event.action === "deselect-option" &&
event.option.value === "*") {
this.setState([]);
} else if (event.action === "deselect-option") {
this.setState(value.filter(o => o.value !== "*"));
} else if (value.length === this.options.length - 1) {
this.setState(this.options);
} else {
this.setState(value);
}
}You can find the full code on codesandbox.io
