{"id":20925016,"url":"https://github.com/akifzdemir/react-multi-select-package","last_synced_at":"2026-02-12T08:02:48.682Z","repository":{"id":246531247,"uuid":"821313758","full_name":"akifzdemir/react-multi-select-package","owner":"akifzdemir","description":"A customizable multi-select component for React applications, designed with Tailwind CSS for styling.","archived":false,"fork":false,"pushed_at":"2024-06-28T12:07:38.000Z","size":81,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-20T07:18:33.134Z","etag":null,"topics":["multiselect","nextjs","npm-package","react","tailwindcss"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@akifzdemir/react-multi-select","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/akifzdemir.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-28T09:06:35.000Z","updated_at":"2024-07-28T07:52:55.000Z","dependencies_parsed_at":"2024-06-28T14:33:01.762Z","dependency_job_id":"a6102ca5-8d77-4764-a905-f4d47a477161","html_url":"https://github.com/akifzdemir/react-multi-select-package","commit_stats":null,"previous_names":["akifzdemir/react-multi-select-package"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akifzdemir%2Freact-multi-select-package","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akifzdemir%2Freact-multi-select-package/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akifzdemir%2Freact-multi-select-package/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akifzdemir%2Freact-multi-select-package/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akifzdemir","download_url":"https://codeload.github.com/akifzdemir/react-multi-select-package/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239599037,"owners_count":19665911,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["multiselect","nextjs","npm-package","react","tailwindcss"],"created_at":"2024-11-18T20:28:44.444Z","updated_at":"2026-02-12T08:02:43.649Z","avatar_url":"https://github.com/akifzdemir.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @akifzdemir/react-multi-select\n\nA customizable multi-select component for React applications, designed with Tailwind CSS for styling.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Screenshot](#screenshot)\n- [Props](#props)\n- [Development](#development)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Installation\n\nInstall the package using npm or yarn:\n\n```bash\nnpm install @akifzdemir/react-multi-select\n```\n\nor\n\n```bash\nyarn add @akifzdemir/react-multi-select\n```\n\n## Usage\n\nImport the `MultiSelect` component and use it in your React application:\n\n```jsx\nimport React from \"react\";\nimport { MultiSelect, OptionType } from \"@akifzdemir/react-multi-select\";\nimport \"@akifzdemir/react-multi-select/dist/style.css\";\n\nconst options: OptionType[] = [\n  { label: \"Option 1\", value: \"option1\" },\n  { label: \"Option 2\", value: \"option2\" },\n  // Add more options here\n];\n\nconst App = () =\u003e {\n  const handleChange = (selected: OptionType[]) =\u003e {\n    console.log(\"Selected options:\", selected);\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cMultiSelect options={options} onChange={handleChange} /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n## Screenshot\n\n![Screenshot](/img/image.png)\n\n## Props\n\nThe `MultiSelect` component accepts the following props:\n\n| Prop              | Type                               | Default     | Description                                       |\n| ----------------- | ---------------------------------- | ----------- | ------------------------------------------------- |\n| `options`         | `OptionType[]`                     | `[]`        | Array of options to select from.                  |\n| `onChange`        | `(selected: OptionType[]) =\u003e void` | `undefined` | Callback function called when selection changes.  |\n| `isDark`          | `boolean`                          | `false`     | Determines if the component should use dark mode. |\n| `selectClassName` | `string`                           | `''`        | Additional classes for the select button.         |\n| `optionClassName` | `string`                           | `''`        | Additional classes for the options.               |\n\n### `OptionType`\n\nThe `OptionType` interface defines the shape of each option object:\n\n```ts\nexport interface OptionType {\n  label: string;\n  value: string;\n}\n```\n\n## Development\n\nTo contribute to this project, follow these steps:\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/username/react-multi-select.git\n```\n\n2. Install dependencies:\n\n```bash\nnpm install\n```\n\n3. Build the project:\n\n```bash\nnpm run build\n```\n\n4. Run the development server:\n\n```bash\nnpm run dev\n```\n\n## Contributing\n\nContributions 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.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakifzdemir%2Freact-multi-select-package","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakifzdemir%2Freact-multi-select-package","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakifzdemir%2Freact-multi-select-package/lists"}