{"id":29580222,"url":"https://github.com/arif-un/react-multiple-select-dropdown-lite","last_synced_at":"2025-07-19T18:30:23.594Z","repository":{"id":41558142,"uuid":"269850274","full_name":"Arif-un/react-multiple-select-dropdown-lite","owner":"Arif-un","description":"Multiple select dropdown component in react.","archived":false,"fork":false,"pushed_at":"2023-10-18T02:01:41.000Z","size":2174,"stargazers_count":11,"open_issues_count":15,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-06-23T04:51:28.037Z","etag":null,"topics":["customizable-dropdown","customizable-select-component","dropdown","input","multiple-select","multiple-select-dropdown","react","searchable-select","select","select-group"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Arif-un.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2020-06-06T03:05:09.000Z","updated_at":"2024-10-25T07:17:57.000Z","dependencies_parsed_at":"2024-06-18T21:19:21.345Z","dependency_job_id":"c4cce4b1-12b5-49c8-b916-2a78d91804d8","html_url":"https://github.com/Arif-un/react-multiple-select-dropdown-lite","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/Arif-un/react-multiple-select-dropdown-lite","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arif-un%2Freact-multiple-select-dropdown-lite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arif-un%2Freact-multiple-select-dropdown-lite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arif-un%2Freact-multiple-select-dropdown-lite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arif-un%2Freact-multiple-select-dropdown-lite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Arif-un","download_url":"https://codeload.github.com/Arif-un/react-multiple-select-dropdown-lite/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arif-un%2Freact-multiple-select-dropdown-lite/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265985527,"owners_count":23859904,"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":["customizable-dropdown","customizable-select-component","dropdown","input","multiple-select","multiple-select-dropdown","react","searchable-select","select","select-group"],"created_at":"2025-07-19T18:30:21.204Z","updated_at":"2025-07-19T18:30:23.550Z","avatar_url":"https://github.com/Arif-un.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## React Multiple Select Dropdown Lite\r\nA lightweight Multiple/Single Select Pure functional component for react using React-Hooks.\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003ca href=\"https://github.com/Arif-un/react-multiple-select-dropdown-lite/blob/master/LICENSE\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"React Multiple Select Dropdown Lite is released under the MIT license.\" /\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"https://www.npmjs.com/package/react-multiple-select-dropdown-lite\"\u003e\r\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/react-multiple-select-dropdown-lite\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"https://bundlephobia.com/result?p=react-multiple-select-dropdown-lite@2.0.4\"\u003e\r\n    \u003cimg alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/min/react-multiple-select-dropdown-lite\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"https://bundlephobia.com/result?p=react-multiple-select-dropdown-lite@2.0.4\"\u003e\r\n    \u003cimg alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/minzip/react-multiple-select-dropdown-lite\"\u003e\r\n  \u003c/a\u003e\r\n  \u003ca href=\"https://github.com/Arif-un/react-multiple-select-dropdown-lite/pulls\"\u003e\r\n    \u003cimg alt=\"npm bundle size\" src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\"\u003e\r\n  \u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n### Screenshot\r\n![react-multiple-select-dropdown-menu](https://github.com/Arif-un/react-multiple-select-dropdown-lite/blob/master/screenshoot/react%20multiple%20select%20dropdown%20menu%20,%20lightweight,%20react%20hooks.gif?raw=true)\r\n\r\n### Install\r\n\r\n    npm i react-multiple-select-dropdown-lite\r\n\r\n### Basic Initialization\r\n```\r\nimport React, { useState } from 'react'\r\nimport MultiSelect from  'react-multiple-select-dropdown-lite'\r\nimport  'react-multiple-select-dropdown-lite/dist/index.css'\r\n\r\nconst App = () =\u003e {\r\n\r\n  const [value, setvalue] = useState('')\r\n\r\n  const  handleOnchange  =  val  =\u003e {\r\n    setvalue(val)\r\n  }\r\n\r\n  const  options  = [\r\n    { label:  'Option 1', value:  'option_1'  },\r\n    { label:  'Option 2', value:  'option_2'  },\r\n    { label:  'Option 3', value:  'option_3'  },\r\n    { label:  'Option 4', value:  'option_4'  },\r\n  ]\r\n\r\n  return(\r\n    \u003cdiv className=\"app\"\u003e\r\n      \u003cdiv  className=\"preview-values\"\u003e\r\n        \u003ch4\u003eValues\u003c/h4\u003e\r\n        {value}\r\n      \u003c/div\u003e\r\n\r\n      \u003cMultiSelect\r\n        onChange={handleOnchange}\r\n        options={options}\r\n      /\u003e\r\n    \u003c/div\u003e\r\n)}\r\nexport  default App\r\n```\r\n## Features and Roadmap\r\n\r\n- [x] JSON Value \u003cbr\u003e\r\n- [x] Clearable \u003cbr\u003e\r\n- [x] Disable Chip \u003cbr\u003e\r\n- [x] Custom Down Arrow Icon \u003cbr\u003e\r\n- [x] Disabled \u003cbr\u003e\r\n- [x] Select Limit \u003cbr\u003e\r\n- [x] Group \u003cbr\u003e\r\n- [x] Searchable \u003cbr\u003e\r\n- [x] Custom Creatable Value \u003cbr\u003e\r\n- [x] Themeable (using css var) \u003cbr\u003e\r\n\u003c!-- - [ ] Sublist \u003cbr\u003e --\u003e\r\n\r\n## Props Options\r\n|Props| type | default | description\r\n|-----|------| ------- | ----------|\r\n| options| array | \"\"  | pass options as array of object \u003cbr\u003e `label` : (string or JSX) Options Label \u003cbr\u003e `value` : Option value \u003cbr\u003e `style` : (object) custom style \u003cbr\u003e `classes` : (string) style classes \u003cbr\u003e`title` : must be provide for JSX label \u003cbr\u003e \u003cbr\u003e example: \u003cbr\u003e `[ { label : \"Option 1\", value : \"opt_1\", style: {textAlign: 'center'}, classes: \"classA classB\" } ]`\r\n| width |  |  | move in css var (version 2.0.1)\r\n|name| string | '' | specify a name for form\r\n|disabled | bool | false | disable input\r\n| defaultValue | string \\| array of object \\| string array | '' | specify default value\r\n|jsonValue | bool | false | get value from input as json\r\n|singleSelect | bool | false | allow one select only\r\n|downArrowIcon| string \\| icon \\| component | SVG | Specify custom down arrow icon\r\n|closeIcon |string \\| icon \\| component  | SVG | Specify custom close arrow icon\r\n|clearable | bool | true | show / hide close icon to clear value\r\ndownArrow |bool | true|  show / hide down icon in dropdown\r\n| className | string \\| object | | specify custom class\r\n|placeholder | string | Select... | Input Placeholder\r\n|disableChip | bool | false | disable multiple select chips show value or total selected value only \r\n|attr | object | |set custom attr to element  \r\n|customValue | bool | false |create custom options by pressing enter or comma (,)\r\n|largeData | bool | false |prevent slow down (DOM) for large amount of data\r\n|chipAlternateText| string| (number) Item Selected | Show text when chip disabled.\r\n|closeOnSelect| bool | true | close option-menu on select option\r\n\r\n\u003cbr\u003e\r\n\r\n### Events\r\n\r\n|Props|Params|Description\r\n|-----|------|------------\r\n|onChange|values| Trigger on change any value\r\n|onMenuOpen|null| Trigger when menu open\r\n|onMenuClose|null| Trigger when menu close\r\n\r\n### CSS Variables\r\nCSS variable applied in `.msl-vars` class name.\r\n|Variable|Default  Value| Details\r\n|----------|--------------|-----------\r\n|--menu-max-height| 400px| Dropdown menu \u003cbr\u003e maximum height.\r\n|--input-width| 300px| Dropdown input width.\r\n|--font-size| 16px| Dropdown font size.\r\n|--border-radius| 8px 8px 8px 8px| Dropdown Border Radius.\r\n|--active-menu-shadow| 1px 1px 5px 0px gray| Menu Shadow \u003cbr\u003e  when active.\r\n|--line-height| 1.4| fonts line height.\r\n|--active-menu-background| white| Dropdown menu \u003cbr\u003e  background color when active.\r\n|--active-menu-radius| var(--border-radius)| Dropdown menu border \u003cbr\u003e  radius when active.\r\n\r\n\u003cbr\u003e\r\n\r\n### Change Log\r\n###### v-2.0.4\r\n- CSS variables updated\r\n\r\n###### v-2.0.1\r\n- Provide component width in css vars intead of props\r\n- Menu rise up at page bottom\r\n- events added on menu open/close\r\n###### v-2.0.0\r\n- React component support as label\r\n- Search feature improved\r\n- Custom values grouped\r\n- Single Select Bug fixed\r\n\r\n\u003cbr\u003e\r\n\u003cbr\u003e\r\n\u003cbr\u003e\r\n\r\n### Sponsor\r\n\r\n[\u003cimg src=\"https://www.bitcode.pro/wp-content/uploads/2019/09/final.svg_-3.png\"\u003e](https://www.bitcode.pro/)\r\n\r\n\r\n### License\r\nMIT © [Arif-Un](https://github.com/arif-un) | [Amin](https://github.com/mdrubelamin2) | Built for Bit Form\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farif-un%2Freact-multiple-select-dropdown-lite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farif-un%2Freact-multiple-select-dropdown-lite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farif-un%2Freact-multiple-select-dropdown-lite/lists"}