react-multi-select-cascading-dropdowns
TypeScript icon, indicating that this package has built-in type declarations

1.0.11 • Public • Published

react-multi-select-cascading-dropdowns

A package to create multiple cascading dropdown filters for dashboard style bi-directional dependent filter implementations Based on react-multi-select-component

Features

  • Written w/ TypeScript

🔧 Installation

npm i react-multi-select-cascading-dropdowns   # npm
yarn add react-multi-select-cascading-dropdowns # yarn
  • Sample Usage example
const Example = () => {
  
  const ref = React.createRef();
  
  const data_labels=['Fruit/Veg', 'Name', 'Color']
  const data=[
  ["fruit","apple","red"],
  ["fruit","grape","purple"],
  ["fruit","banana","yellow"],
  ["veg","broccoli","green"],
  ["veg","pumpkin","orange"],
  ["veg","chilli","red"],
  ]
  useEffect(() => {}, []);

  function onChangeData(e) {
    console.log(e);
  }

  function onClick() {
    ref.current.clearFilters();
  }

  function onClickSelect() {
    ref.current.selectAllFilters();
  }

  return (
    <div>
      <button onClick={onClick}>Clear All Filters</button>
      <button onClick={onClickSelect}>Select All Filters</button>
      <MultiselectCascadeFilter
        ref={ref}
        data={data}
        n_items={3}
        onChange={onChangeData}
        showInactiveItems={true}
        preserveInactiveSelections={false}
        showLabel={true}
        padding={'10px'}
        margin={'20px'}
        labels={data_labels}       
        singleSelect={[true, false, false, false, false]}
        hasSelectAll={[false, true, true, true, true]}
        shouldToggleOnHover={[false, false, false, false, false]}
        debounceDuration={10}
        closeOnChangedValue={[false, false, false, false, false]}
      />
    </div>
  );
};

export default Example;

📝 Changelog

For every release changelog/migration-guide will be available in releases

Credits

📜 License

MIT © Rahul K

/react-multi-select-cascading-dropdowns/

    Package Sidebar

    Install

    npm i react-multi-select-cascading-dropdowns

    Weekly Downloads

    1

    Version

    1.0.11

    License

    MIT

    Unpacked Size

    17.6 kB

    Total Files

    13

    Last publish

    Collaborators

    • lab-rk