Description

• Simple, quick dropdown (group) for react.
• Append perfect scrollbar. (if need)
• Support show top, hide, select empty...
• Fit to window size if exceeding the height beyond the window.
• Auto change show top or bootom.(if need).
• => If you want more, please use react-select.

Usage

Install the package

// if use perfectScroll = true
// npm i --D react-perfect-scrollbar-z

npm i --D react-dropdown-z

Import the module in the place you want to use:

// if use perfectScroll = true
// import 'react-perfect-scrollbar-z/build/styles.css';

import "react-dropdown-z/build/styles.css";
import Dropdown from "react-dropdown-z";

Snippet

    const [value, setValue] = React.useState();

    // flat options
    const options = [ "o1", "tw2", "th3", "f4" ];

    <Dropdown
      // placeholder="Abcd"
      options={options}
      width="200px"
      perfectScroll // if need
      // heightDropdown="100px" // fit with window
      value={value}
      onSelection={setValue}
      showTop
    />

    // Object array
    // keyName and labelName
    const options2 = [
      // { dsds: 'dsd' }, // => please set key and value
      {
        val: 0,
        text: 'this one',
      },
      {
        val: 2,
        text: 'this one 2',
      },
      {
        val: 3,
        text: 'this one 3',
        className: 'class-3'
      },
      {
        val: 10,
        text: 'this one 10',
        disabled: true
      },

      // group
      {
        isGroup: true,
        groupName: 'group a',
        className: 'groupclass'
        items: [
          {
            val: 4,
            text: 'this one 4',
          },
        ],
      },
    ]

    <Dropdown
      // placeholder="Abcd"
      keyName="val"  // only set when array option is object
      labelName="text" // only set when array option is object
      options={options2}
      width="200px"
      value={value}
      onSelection={setValue}
      // showTop
      // resizeClose={false}
    />

props

see index.d.ts

| props | type | description | |----------------------|-------------------------------|----------------------------------------------------------------------------|

  className?: string;
  arrowClassName?: string;
  groupItemClassName?: string;
  dropdownClassName?: string;
  placeholderClassName?: string;
  showTop?: boolean;
  options: any[];
  keyName?: string; // only option is array
  labelName?: string;  // only option is array
  value?: string | number | null;
  customizeArrow?: string | React.ReactNode;
  placeholder?: string;
  noDataMessage?: string; // labelName when no option
  width?: string | number; // box with
  height?: string | number; // box height
  // fullWidth?: boolean;
  perfectScroll?: boolean;  // appy perfect scrollbar if true
  tabIndex?: number;
  disabled?: boolean;
  heightDropdown?: string | number; // menu height
  open?: boolean;
  keepScrollPosition?: boolean;  // default: true
  resizeClose?: boolean;  // default: true
  onSelection?: (value: string | number | null, selectItem?: any) => any;
  onShown?: () => void;
  onHidden?: () => void;

Note

RUN

LIVE EXAMPLE

License

MIT