Package Exports

react-dropdown-z
react-dropdown-z/build/index.esm.js
react-dropdown-z/build/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-dropdown-z) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-dropdown-z

react-dropdown-z
LIVE EXAMPLE

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