React Multiselect Checkboxes

 

 

 

 

 

 

 

React Multiselect Checkboxes

A flexible, stylable, compact multi-select component.

It's based on react-select and has a similar API for data and styling.

Installation

npm i -S react-multiselect-checkboxes

Basic usage

import ReactMultiSelectCheckboxes from 'react-multiselect-checkboxes';
 
// ...
const options = [
  { label: 'Thing 1', value: 1},
  { label: 'Thing 2', value: 2},
];
<ReactMultiSelectCheckboxes options={options} />

Props

Nearly all of the options from react-select are supported, except where they don't make sense (for instance, isMulti={false} isn't supported, since this is always in multi-select mode). These props are passed directly to the underlying Select component. In addition, there are some options which are specific to react-multiselect-checkboxes:

Prop Type Default Description
placeholderButtonLabel PropTypes.string 'Select...' Displayed on dropdown button if no value is selected.
getDropdownButtonLabel PropTypes.func ({ placeholderButtonLabel, value }) => {/* if-else logic*/} Get the label for the dropdown, based on the placeholder and the current value. By default this is (a) the placeholder, if nothing is selected; (b) the selected value's label, if one option is selected; or (c) the number selected (e.g. "3 selected") if more than one option is selected
rightAligned PropTypes.bool false Whether to align the menu to the right side of the component. By default it's flush with the left.

Styling

Like props, styles supported by react-select are passed directly into the underlying Select component. Some of the defaults have been tweaked for the multiselect, but you can override them like normal (see https://react-select.com/styles). In addition, there are some styles which are specific to react-multiselect-checkboxes:

Style key Options Description Screenshot
dropdownButton { value, isOpen, width } Used to style the dropdown button component. Pressing this component opens the menu.
groupHeading { checked, indeterminate } This exists in react-select already -- it's used to style the group heading label. We add two new options based on the selected state of the group: checked is true if all options in the group are selected, indeterminate if only some are selected.

Component replacement

Again, we're taking this API straight from react-select, and you can replace any of the basic Select components as well. There are some new components which are specific to react-multiselect-checkboxes too:

Dropdown (source)

Prop Type Description
children PropTypes.node The children for the menu. Note: this is not the dropdown button / click target.
isOpen PropTypes.bool Is the Dropdown open right now?
rightAligned PropTypes.bool Whether to align the menu to the right side of the component. By default it's flush with the left.
onClose PropTypes.func Callback function to run when the menu is closed. In the default implementation this happens on outside click.
target PropTypes.node The dropdown button / click target. Clicking on this will generally open the menu.

DropdownButton (source)

Prop Type Description
children PropTypes.node The contents of the dropdown button, generally a string.
onPress PropTypes.func Callback function to run when the dropdown button is pressed. This will generally open the menu.
iconAfter PropTypes.node An icon component to render after the button's contents. By default it's a down-facing chevron.
style PropTypes.object The style to apply to the dropdown button. If you're doing custom styling, you'll probably ignore it.


example:


step :1

Installation

npm i -S react-multiselect-checkboxes
 
 
 
data.js
export default [{
    "id": 1,
    "value": "9ce42304-b732-4791-9731-6f299b6df8c7",
    "label": "Blue"
  }, {
    "id": 2,
    "value": "90419f06-7d07-45c8-bcec-d675096fe27f",
    "label": "Goldenrod"
  }, {
    "id": 3,
    "value": "a23521da-0a48-4ef6-baa2-d727704f65c2",
    "label": "Teal"
  }, {
    "id": 4,
    "value": "34b2b58a-0123-49e2-b2de-1eef0922139b",
    "label": "Puce"
  }, {
    "id": 5,
    "value": "0fceaec7-fb46-4aef-994b-863a97130168",
    "label": "Khaki"
  }, {
    "id": 6,
    "value": "b68c6b76-bbe0-49a6-8a90-209b8d88d353",
    "label": "Green"
  }, {
    "id": 7,
    "value": "e2829c11-0960-490c-b19b-5c5bb26a18ce",
    "label": "Crimson"
  },  {
    "id": 9,
    "value": "841e6f9f-1e19-4501-8b75-cd153282ed21",
    "label": "Orange"
  }, {
    "id": 10,
    "value": "9346ba4b-8b3e-4c06-b930-cb3d98c58890",
    "label": "Turquoise"
  }, {
    "id": 11,
    "value": "7294d507-d6c5-47bf-8ef3-c291c273b647",
    "label": "Violet"
  }, {
    "id": 12,
    "value": "451d4254-a882-4d53-a4ca-c7cb4707d1a5",
    "label": "Red"
  }, {
    "id": 15,
    "value": "2378fade-f686-4f0d-bf00-4e5213032c9b",
    "label": "Aquamarine"
  },    {
    "id": 20,
    "value": "77ec7a0b-329d-4643-bbc7-0fa12c788ded",
    "label": "Mauv"
  }]
 
 MultiSelect.js

import React from "react"
import ReactMultiSelectCheckboxes from 'react-multiselect-checkboxes';

import options from "./data"

const MultiSelect = () => {
  return <ReactMultiSelectCheckboxes options={options}/>
}

export default MultiSelect;


MultiSelectAll.js

import React, { useState, useEffect } from "react";
import ReactMultiSelectCheckboxes from "react-multiselect-checkboxes";

import options from "./data";

const MultiSelectAll = () => {
  const [selectedOptions, setSelectedOptions] = useState([]);

  useEffect(() => {
    setSelectedOptions([{ label: "All", value: "*" }, ...options]);
  }, []);

  function getDropdownButtonLabel({ placeholderButtonLabel, value }) {
    if (value && value.some((o) => o.value === "*")) {
      return `${placeholderButtonLabel}: All`;
    } else {
      return `${placeholderButtonLabel}: ${value.length} selected`;
    }
  }

  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);
    }
  }

  return (
    <ReactMultiSelectCheckboxes
      options={[{ label: "All", value: "*" }, ...options]}
      placeholderButtonLabel="Colors"
      getDropdownButtonLabel={getDropdownButtonLabel}
      value={selectedOptions}
      onChange={onChange}
      setState={setSelectedOptions}
    />
  );
};

export default MultiSelectAll;

App.js

import React from "react";

import MultiSelect from "./MultiSelect";
import MultiSelectAll from "./MultiSelectAll";

export default function App() {
  return (
    <div className="App">
      <MultiSelect />
      <br />
      <MultiSelectAll />
    </div>
  );
}


DOT NET ADDA

interested in solving the problems based on technologies like Amazon AWS ,Google Cloud, Azure and Dot related technology like asp.net, C#, asp.net core API, swagger, react js,Jquery ,javascripts, bootstrap, css,html, ms sql,IIS,WPF ,WCF,Firebase,RDLC Report etc..

إرسال تعليق (0)
أحدث أقدم