@akifzdemir/react-multi-select NPM

@akifzdemir/react-multi-select

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

Installation

Install the package using npm or yarn:

npm install @akifzdemir/react-multi-select

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:

Clone the repository:

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

Install dependencies:

npm install

Build the project:

npm run build

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.