Description

• Simple, quick dropdown (group) for react.
• Append perfect scrollbar. (if need)
• Support show top, hide.
• Fit to window size if exceeding the height beyond the window.
• Auto change show top or bottom. (if need).
• Add tooltip if-need rc-tc-ifn
• If you want more, please use react-select.

Usage

Install the package

npm i react-dropdown-z

Import the module in the place you want to use:

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"
      enablePerfectScroll // if need
      // dropdownHeight="100px" // fit with window
      value={value}
      handleSelection={setValue}
      showAbove
    />

    // Object array
    // keyName and labelName
    const options2 = [
      { dsds: 'dsd' }, // => please set key and value => display json
      {
        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 this is option tooltip abcd xyz',
        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}
      handleSelection={setValue}
      // resizeClose={false}
      showAbove
      tooltipIfLabelProps={{
        placement: 'right',
        width: '100%',
      }}
      tooltipIfDropdownProps={{
        placement: 'right',
        width: '100%',
      }}
    />

props

Note

tooltipIfProps: react-tooltip-z / rc-tc-ifn

RUN

LIVE EXAMPLE

License

MIT