React Dropdown Toolkit

A customizable and searchable dropdown component for ReactJS.

See it in action (Demo)

Features

• Search functionality
• Supports single and multiple selection
• Option to render in a portal

Installation

Install the package via npm or yarn:

npm install react-dropdown-toolkit
or
yarn add react-dropdown-toolkit

Usage

Here's a basic example of how to use the Dropdown component:

import React from 'react';

import Dropdown from 'react-dropdown-toolkit';
import 'react-dropdown-toolkit/dist/index.css';

const options = [
  { label: 'Option 1', value: 'option1' },
  { label: 'Option 2', value: 'option2' },
  { label: 'Option 3', value: 'option3' },
];

const App = () => {
  return (
    <div>
      <h1>Dropdown Example</h1>
      <Dropdown options={options} label="Select an option" />
    </div>
  );
};

export default App;

Props

Dropdown

| Prop | Type | Default | Description | | ------------------ | ------------------------------------------------------------- | --------- | ---------------------------------------------- | | options | { label: string, value: string }[] | [] | The options to display in the dropdown | | multiple | boolean | false | Allows multiple selection | | withSearch | boolean | true | Enables search functionality | | onSelectedChange | ((selected: string[]) => void | undefined | Capture selected values in array format | | portal | boolean | false | Renders dropdown in a portal | | outlined | boolean | true | Adds an outline to the dropdown | | customRenderOption | (option: { label: string, value: string }) => React.ReactNode | null | Custom function to render an option | | zIndex | number | 1000 | The z-index of the dropdown menu | | label | string | "Label" | The label for the dropdown | | noLabel | boolean | false | To hide labels | | labelWidth | string | "250px" | Set the label width and adjust it to your form | | labelPosition | string | "left" | Displays label position | | labelStyle | {} | {} | Custom label style |

Development

To run the project locally for development:

Clone the repository:

git clone https://github.com/wisnuvb/react-dropdown-toolkit.git
cd react-dropdown-toolkit

Install dependencies:

npm run install
or
yarn install

Build the project:

npm run build
or
yarn build

Run tests:

npm run test
or
yarn test

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

This project is licensed under the ISC License.