CustomSelect:- CustomSelect is a customizable multi-select dropdown component for React. It supports multi-select and single-select modes, search functionality, keyboard navigation, and more.

Installation You can install CustomSelect via npm or yarn:

npm install custom-select or yarn add custom-select

Usage :- To use the CustomSelect component, import it into your React project and pass the required props.

Basic Example :-

import React from 'react';
import CustomSelect from 'custom-select';

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

  return (
    <div>
      <CustomSelect
        options={options}
        placeholder="Select an option..."
      />
    </div>
  );
};

export default App;

Props :-

1. options (Array): List of options to display in the dropdown. Each option should be a string.
2. placeholder (string): Placeholder text to display when no option is selected.
3. width (string): Width of the select component (default: '200px').
4. visibleOptions (number|string): Number of options to display in the dropdown before scrolling is needed. Set to 'all' to display all options. (default: 'all')
5. multi (boolean): Whether multiple options can be selected. (default: true)

Features:-

1. Multi-select and Single-select Modes: Choose whether users can select multiple options or just one.
2. Searchable Dropdown: Type to filter options.
3. Keyboard Navigation: Use Arrow keys to navigate options and Enter key to select.

License:- CustomSelect is licensed under the MIT License. See the LICENSE file for more details.