react-nested-dropdown

A simple and customizable nested dropdown component for React.

Features

• Custom trigger element
• Dropdown item with submenu
• Multi level submenu support
• Specific props to each dropdown item
• Auto positioning of dropdown menu
• Written in TypeScript 🤙

Installation

# using npm
npm install react-nested-dropdown
# using pnpm
pnpm install react-nested-dropdown
# using yarn
yarn add react-nested-dropdown

Basic usage

import React from 'react';

import { Dropdown } from 'react-nested-dropdown';
import 'react-nested-dropdown/dist/styles.css';

const items = [
  {
    label: 'Option 1',
    onSelect: () => console.log('Option 1 selected'),
  },
  {
    label: 'Option 2',
    items: [
      {
        label: 'Option 2.1',
        onSelect: () => console.log('Option 2.1 selected'),
      },
      {
        label: 'Option 2.2',
        onSelect: () => console.log('Option 2.2 selected'),
      },
    ],
  },
];

export const App = () => {
  return (
    <Dropdown items={items} containerWidth="300px">
      {({ isOpen, onClick }) => (
        <button type="button" onClick={onClick}>
          {isOpen ? 'Close dropdown' : 'Open dropdown'}
        </button>
      )}
    </Dropdown>
  );
};

Dropdown props

| Prop | Type | Default | Description | | ---------------- | -------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | items | DropdownItem[] | [] | An array of dropdown items to render in the menu. | | containerWidth | number or string | 300 | The width of the dropdown menu container. Can be a number for pixels or a string for any valid CSS width value. | | onSelect | (value: any, option: DropdownItem) => void | null | A callback function that is called when an option is selected. It is passed the value of the selected option and the option object itself. | | children | (params: { onClick: () => void, isOpen: boolean }) => React.ReactElement | null | A function that returns a React element to be used as the trigger for the dropdown menu. The function is passed an object with an onClick function to open and close the dropdown, and an isOpen boolean to indicate the current open state of the dropdown. | | className | string | null | A custom class name to be applied to the root element of the component. | | renderOption | (option: DropdownItem) => React.ReactElement | null | A function that returns a React element for rendering each option in the dropdown menu. It is passed the option object for the current item. | | closeOnScroll | boolean | true | If set to true, the dropdown menu will close when the page is scrolled. |

DropdownItem interface

| Prop | Type | Default | Description | | --------------------- | -------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------- | | label | string | '' | The label to display for the item. | | iconBefore | React.ReactNode | null | An optional icon to display before the label. | | iconAfter | React.ReactNode | null | An optional icon to display after the label. | | items | DropdownItem[] | null | An optional array of nested items to create a submenu. | | itemsContainerWidth | number or string | 150 | The width of the sub items menu container. Can be a number for pixels or a string for any valid CSS width value. | | value | any | undefined | An optional value for the item. This value will be in Dropdown's callback onSelect as first argument. | | onSelect | () => void | null | An optional callback function to be called when the item is selected. | | disabled | boolean | false | Whether the item should be disabled and unable to be selected. | | className | string | null | An optional class name to be applied to the item element. |