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

``bash npm i react-multi-select-cascading-dropdowns # npm yarn add react-multi-select-cascading-dropdowns # yarn`

- Sample Usage example

`tsx 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 (


      
      
              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]}
      />


  );
};

export default Example;``

📝 Changelog

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

Credits

- This project uses select dropdowns from react-multi-select-component
- TypeScript

📜 License

MIT © Rahul K

🔧 Installation

bash
npm i react-multi-select-cascading-dropdowns   # npm
yarn add react-multi-select-cascading-dropdowns # yarn

- Sample Usage example

tsx
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 (


      
      
              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]}
      />

);
};

export default Example;