Have ideas to improve npm?Join in the discussion! »

    react-dropdown-cascade
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    react-dropdown-cascade

    A React component inpired by rc-cascader, without external dependencies and styled like material design.

    Installation

    npm install react-dropdown-cascade --save

    or

    yarn add react-dropdown-cascade

    Usage

    import React, { useState } from 'react';
    import DropdownCascade from 'react-dropdown-cascade';
    
    const items = [
      {
        value: '1',
        label: 'Menu 1',
        children: [
          {
            value: '11',
            label: 'Another Item'
          },
          {
            value: '12',
            label: 'More Items',
            children: [
              {
                value: '121',
                label: 'Sub Item A'
              },
              {
                value: '122',
                label: 'Sub Item B',
                disabled: true
              },
              {
                value: '123',
                label: 'Sub Item C'
              }
            ]
          }
        ]
      },
      {
        value: '2',
        label: 'Menu 2'
      },
      {
        value: '3',
        label: 'Menu 3',
        children: [
          {
            value: '31',
            label: 'Hello'
          },
          {
            value: '21',
            label: 'World'
          }
        ]
      }
    ];
    
    export default function App() {
      const [dropdownValue, setDropdownValue] = useState();
    
      return (
        <>
          <h1 style={{ margin: 15 }}>react-dropdown-cascade</h1>
          <DropdownCascade
            customStyles={{
              dropdown: {
                style: {
                  margin: '5px 20px 15px 20px'
                }
              }
            }}
            items={items}
            onSelect={(value, selectedItems) => {
              console.log(value, selectedItems);
              setDropdownValue(value);
            }}
            value={dropdownValue}
          />
        </>
      );
    }

    Screenshots

    API

    Props

    Prop Type Required Default Description
    customInput Component Reference no input This allow supporting custom input
    customInputProps boolean no false Additional props for custom input
    customStyles object no false Custom styles
    disabled boolean no false Pass disabled to input
    expandTrigger string no 'click' Trigger that shows the dropdown
    fieldNames object no { value: 'value', label: 'label', children: 'children' } Custom field names for label and value and children
    items array yes The cascade items
    onSelect function no undefined Callback with selected value and as 2nd param the items without children
    separatorIcon string no ' > ' Custom the separator when path labels join until selection
    value string no undefined The cascade value

    License

    MIT

    Install

    npm i react-dropdown-cascade

    DownloadsWeekly Downloads

    1

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    37.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar