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.