@akifzdemir/react-multi-select

A customizable multi-select component for React applications, designed with Tailwind CSS for styling.

Table of Contents

• Installation
• Usage
• Props
• Development
• Contributing
• License

Installation

Install the package using npm or yarn:

npm install @akifzdemir/react-multi-select

or

yarn add @akifzdemir/react-multi-select

Usage

Import the MultiSelect component and use it in your React application:

import React from "react";
import { MultiSelect, OptionType } from "@akifzdemir/react-multi-select";
import "@akifzdemir/react-multi-select/dist/style.css";

const options: OptionType[] = [
  { label: "Option 1", value: "option1" },
  { label: "Option 2", value: "option2" },
  // Add more options here
];

const App = () => {
  const handleChange = (selected: OptionType[]) => {
    console.log("Selected options:", selected);
  };

  return (
    <div>
      <MultiSelect options={options} onChange={handleChange} />
    </div>
  );
};

export default App;

Props

The MultiSelect component accepts the following props:

| Prop | Type | Default | Description | | ----------------- | ---------------------------------- | ----------- | ------------------------------------------------- | | options | OptionType[] | [] | Array of options to select from. | | onChange | (selected: OptionType[]) => void | undefined | Callback function called when selection changes. | | isDark | boolean | false | Determines if the component should use dark mode. | | selectClassName | string | '' | Additional classes for the select button. | | optionClassName | string | '' | Additional classes for the options. |

OptionType

The OptionType interface defines the shape of each option object:

export interface OptionType {
  label: string;
  value: string;
}

Development

To contribute to this project, follow these steps:

1. Clone the repository:

git clone https://github.com/username/react-multi-select.git

2. Install dependencies:

npm install

3. Build the project:

npm run build

4. Run the development server:

npm run dev

Contributing

Contributions are welcome! Please open an issue or submit a pull request with your changes. For major changes, please open an issue first to discuss what you would like to change.

License

This project is licensed under the MIT License. See the LICENSE file for details.