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) component for react.
Append perfect scrollbar.
Support show top, resize hide, select empty...
Fit size with window if it is over.
If you want more, please use react-select.

Usage

Install the package

// apply perfectscrollbar  (require)
npm ínitall --save react-perfect-scrollbar-z

npm install --save react-dropdown-z

Import the module in the place you want to use:

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="sdjks"
      options={options}
      width="200px"
      // heightDropdown="900px"
      value={value}
      onSelection={setValue}
      // showTop
      // resizeClose={false}
    />


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

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

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;
  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