Nested Select React

A flexible, accessible nested select component for React applications that allows users to navigate and select from hierarchical data.

Installation

npm install nested-select-react
# or
yarn add nested-select-react

Usage

import { NestedSelect } from 'nested-select-react';

// Your hierarchical data
const categories = [
  {
    id: '1',
    name: 'Electronics',
    children: [
      {
        id: '1-1',
        name: 'Computers',
        children: [
          { id: '1-1-1', name: 'Laptops' },
          { id: '1-1-2', name: 'Desktops' }
        ]
      },
      { id: '1-2', name: 'Smartphones' }
    ]
  },
  {
    id: '2',
    name: 'Clothing',
    children: [
      { id: '2-1', name: 'Men' },
      { id: '2-2', name: 'Women' }
    ]
  }
];

function App() {
  const [selectedCategory, setSelectedCategory] = useState(null);

  const handleSelect = (category) => {
    setSelectedCategory(category);
    console.log('Selected:', category);
  };

  return (
    <div>
      <h1>Product Category</h1>
      <NestedSelect
        items={categories}
        selectedItemId={selectedCategory?.id}
        onSelect={handleSelect}
        placeholder="Select a category..."
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | items | array | required | Array of hierarchical items | | selectedItemId | string/number | null | ID of the currently selected item | | onSelect | function | required | Callback when an item is selected | | idKey | string | 'id' | Key to use for item IDs | | labelKey | string | 'name' | Key to use for item labels | | childrenKey | string | 'children' | Key to use for item children | | placeholder | string | 'Select an item...' | Placeholder text when no item is selected | | maxHeight | string/number | '15rem' | Maximum height of the dropdown menu | | className | string | '' | Additional CSS classes for the component | | dropdownClassName | string | '' | Additional CSS classes for the dropdown | | showSelectAll | boolean | true | Whether to show the "Select All" button | | showBreadcrumb | boolean | true | Whether to show the breadcrumb navigation | | renderItem | function | - | Custom renderer for items | | renderTrigger | function | - | Custom renderer for the trigger button | | renderBreadcrumb | function | - | Custom renderer for breadcrumb navigation | | renderEmpty | function | - | Custom renderer for empty state | | disableItem | function | - | Function to determine if an item should be disabled | | filterItems | function | - | Function to filter items when searching | | searchPlaceholder | string | 'Search...' | Placeholder text for the search input |

License

MIT