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

| Prop Name | Type | Description | |--------------------------|-------------------------------------------------------|------------------------------------------------------------------| | className | string | Custom class for the root container. | | arrowClassName | string | Custom class for the dropdown arrow. | | groupItemClassName | string | Custom class for grouped items. | | dropdownClassName | string | Custom class for the dropdown list container. | | placeholderClassName | string | Custom class for the placeholder. | | showAbove | boolean | Whether the dropdown should appear above the trigger. | | options | IFGroupData[] \| any[] | Array of selectable options. | | keyName | string | Key name used to extract the value from an option object. | | labelName | string | Key name used to extract the label from an option object. | | value | string \| number \| null | Currently selected value. | | customizeArrow | string \| React.ReactNode | Custom arrow icon/component. | | placeholder | string | Placeholder text when no value is selected. | | noDataText | string | Text to display when options is empty. | | width | string \| number | Width of the dropdown component. | | height | string \| number | Height of the select box (not the dropdown). | | fullWidth | boolean | If true, makes the component stretch to 100% width. | | enablePerfectScroll | boolean | Enables perfect-scrollbar integration for dropdown scrolling. | | tabIndex | number | Sets tab index for accessibility. | | disabled | boolean | Disables the dropdown when true. | | dropdownHeight | string \| number | Explicit height for the dropdown list. | | fitToWindowHeight | boolean | Dropdown resizes to fit within visible window area. | | autoAdjustDirection | boolean | Automatically flips dropdown direction based on available space. | | preserveScrollPosition | boolean | Retains scroll position in dropdown between opens. | | closeOnResize | boolean | Closes dropdown when window is resized. | | closeOnEscape | boolean | Closes dropdown when Escape is pressed. | | closeOnOutside | boolean | Closes when clicking outside the dropdown. | | tooltipIfLabelProps | IFTooltipLabelProps | Tooltip props for the label. | | tooltipIfDropdownProps | IFTooltipDropdownProps | Tooltip props for the dropdown content. | | handleSelection | (value: string \| number \| null, selectItem?: any) => any | Callback when an option is selected. |

Note

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

RUN

LIVE EXAMPLE

License

MIT