react-interactive-dropdown

react-interactive-dropdown is a highly customizable and easy-to-use dropdown component for React that supports multiple features like multi-select, server-side search, pagination, custom styling, and more. It leverages the power of react-window for rendering large lists efficiently.

Features

• Single select and multi-select options
• Customizable with icons, checkboxes, and end adornments
• Searchable with both client-side and server-side options
• Supports pagination with infinite scrolling using IntersectionObserver
• Handles component rendering for custom options
• Option to display selected items as chips
• Fully customizable styles and components

Installation

Install the package via npm:

npm install react-interactive-dropdown

Usage Here is a basic example of how to use the InteractiveDropdown component:

import React, { useState } from "react";
import InteractiveDropdown from "react-interactive-dropdown";

const options = [
  { value: 1, label: "Option 1" },
  { value: 2, label: "Option 2" },
  { value: 3, label: "Option 3" },
];

function App() {
  const [selectedValue, setSelectedValue] = useState(null);
  const handleChange = (value) => {
    setSelectedValue(value);
  };
  return (
    <div>
      <InteractiveDropdown
        selectionList={options}
        placeholder="Select an option"
        value={selectedValue}
        onChange={handleChange}
        isSearchable={true}
        isMultiSelect={false}
        labelKeys={["label"]}
        valueKey="value"
      />
    </div>
  );
}
export default App;

Props

Advanced Usage

UI Virtualization The dropdown uses react-window to efficiently render large lists. This improves performance by only rendering items that are currently visible in the viewport.

Server-Side Pagination The onLastRowIntersect prop allows you to handle server-side pagination. When the last row in the list becomes visible, this callback is triggered, enabling you to fetch and append more items.

<InteractiveDropdown
  selectionList={options}
  placeholder="Select an option"
  value={selectedValue}
  onChange={handleChange}
  isSearchable={true}
  isMultiSelect={false}
  labelKeys={["label"]}
  valueKey="value"
  onLastRowIntersect={() => {
    // api call for next data
  }}
  isPagination={true}
/>

Server-Side Option Search For handling search queries on the server side, use the isServerSideSearch prop. The onSearchQueryChange callback will be invoked whenever the search query changes, allowing you to fetch search results from your server.

<InteractiveDropdown
  selectionList={options}
  placeholder="Select an option"
  value={selectedValue}
  onChange={handleChange}
  isSearchable={true}
  isMultiSelect={false}
  labelKeys={["label"]}
  valueKey="value"
  isServerSideSearch={(e) => {
    //here is your server-side searh logic
  }}
/>

Custom Option Components You can pass a custom component for options using the isComponentOptions prop. This allows for highly customizable option rendering, as you can provide a component that will be rendered for each option in the dropdown.

consy options = {
  {value:"ITEM_1", label:"Item 1", comp: {<img src={item1_img_src}/>}},
  ...
}
<InteractiveDropdown
  selectionList={options}
  placeholder="Select an option"
  value={selectedValue}
  onChange={handleChange}
  isSearchable={true}
  isMultiSelect={false}
  labelKeys={["label"]}
  valueKey="value"
  isComponentOptions={true}
/>

Styling

The dropdown component uses the following CSS classes which you can override in your own stylesheet:

.inputfield-label: Styles for the label of the dropdown. .chip: Styles for selected items when withChips is true. .closeButton: Styles for the close button in chips. .options-container: Styles for the dropdown menu container. .menu-search-div: Styles for the search input container. .menu-search-input: Styles for the search input. .menu-list-div: Styles for the dropdown list container. .menu-div: Styles for each option in the dropdown menu. .styled-menu-div: Styles for the menu options. .selected-styled-menu-div: Styles for selected menu options. .no-option-div: Styles for the no options available message.

As this library is in its early stages, we highly encourage users to report any bugs or issues they encounter. We are continuously working around it to make the library more sustainable. Thank you for your feedback and support!

License

This project is licensed under the ISC License