SelectDropdown Component

Overview

The SelectDropdown component is a versatile and customizable React component designed to provide a feature-rich dropdown menu. This component supports a variety of features that enhance its usability and adaptability in different applications.

Component Features

• Searchable Dropdown: Implement a search feature within the dropdown to easily filter and find options.
• Portal Support: Allow the dropdown to be used with or without a portal, ensuring flexibility in placement and layout.
• Single or Multiple Selection: Enable the dropdown to support both single and multiple option selections, catering to different use cases.
• Customizable Option Rendering: Allow customization of how options are rendered, providing flexibility in display.
• Search Filtering: Ensure the search can filter a long list of options into a shorter, more manageable list.
• Toggle Features: Allow each feature (like search) to be turned on or off, giving control over the dropdown's functionality.
• Z-Index Compatibility: Ensure the floating menu works seamlessly with elements that have a z-index greater than 1000, maintaining proper stacking context.

Installation

Install the component using npm:

npm install react-vite-select-dropdown

Usage

Import and use the SelectDropdown component in your React application:

import React from 'react';
import { SelectDropdown } from 'react-vite-select-dropdown';

function App() {
  const options = ['Option 1', 'Option 2', 'Option 3'];

  return (
    <div>
      <SelectDropdown
        id="my-dropdown"
        label="Select an option"
        options={options}
        multiple={true}
        searchable={true}
        placeholder="Choose options"
      />
    </div>
  );
}

export default App;

Props

• id (string, required): Unique identifier for the dropdown.
• label (string): Label for the dropdown.
• options (array of strings, required): List of options to display in the dropdown.
• multiple (boolean): Enable multiple selection.
• searchable (boolean): Enable search functionality.
• portal (boolean): Use a portal for the dropdown menu.
• zIndex (number): Set the z-index for the dropdown menu.
• renderOption (function): Custom render function for options.
• placeholder (string): Placeholder text for the dropdown.

License

This component is licensed under the MIT License.