{"id":16515624,"url":"https://github.com/insin/react-filtered-multiselect","last_synced_at":"2025-09-21T00:31:36.248Z","repository":{"id":23232022,"uuid":"26589517","full_name":"insin/react-filtered-multiselect","owner":"insin","description":"Filtered multi-select React component","archived":false,"fork":false,"pushed_at":"2021-05-31T10:50:27.000Z","size":88,"stargazers_count":61,"open_issues_count":14,"forks_count":25,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-09T04:16:18.809Z","etag":null,"topics":["form-input","multi-select","react","react-component"],"latest_commit_sha":null,"homepage":"http://insin.github.io/react-filtered-multiselect","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/insin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-13T13:44:12.000Z","updated_at":"2023-03-11T20:08:56.000Z","dependencies_parsed_at":"2022-07-25T12:32:31.327Z","dependency_job_id":null,"html_url":"https://github.com/insin/react-filtered-multiselect","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/insin/react-filtered-multiselect","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-filtered-multiselect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-filtered-multiselect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-filtered-multiselect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-filtered-multiselect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/insin","download_url":"https://codeload.github.com/insin/react-filtered-multiselect/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-filtered-multiselect/sbom","scorecard":{"id":489725,"data":{"date":"2025-08-11","repo":{"name":"github.com/insin/react-filtered-multiselect","commit":"161bc32834b5ea96c28e954054adbab10c20f044"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Code-Review","score":0,"reason":"Found 1/29 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 2 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-19T18:45:44.118Z","repository_id":23232022,"created_at":"2025-08-19T18:45:44.118Z","updated_at":"2025-08-19T18:45:44.118Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274753273,"owners_count":25342822,"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","status":"online","status_checked_at":"2025-09-12T02:00:09.324Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["form-input","multi-select","react","react-component"],"created_at":"2024-10-11T16:17:42.531Z","updated_at":"2025-09-21T00:31:36.003Z","avatar_url":"https://github.com/insin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-filtered-multiselect\n\n[![Travis][build-badge]][build]\n[![npm package][npm-badge]][npm]\n\nA `\u003cFilteredMultiSelect/\u003e` React component, for making and adding to selections using a filtered multi-select.\n\n[Live example with Bootstrap styles applied](http://insin.github.io/react-filtered-multiselect/)\n\n![FilteredMultiSelect with Bootstrap styles screenshot](https://github.com/insin/react-filtered-multiselect/raw/master/bootstrap-example.png \"A FilteredMultiSelect with Bootstrap styles applied\")\n\n## Features\n\nThis component manages an `\u003cinput\u003e`, a `\u003cselect multiple\u003e` and a `\u003cbutton\u003e`.\n\nYou provide a list of objects to be used to populate the select and an `onChange` callback function.\n\nTyping in the the input will filter the select to items with matching option text.\n\nWhen some of the select's options are selected, the button will become enabled. Clicking it will select the objects backing the currently selected options.\n\nIf only one option is displayed after filtering against the input, pressing Enter in the input will select the object backing it.\n\nWhen backing objects are selected, the `onChange` callback is executed, passing a list of all backing objects selected so far.\n\nTo hide already-selected items, pass them back to `FilteredMultiSelect` as its `selectedOptions` prop. This can be more convenient than manually removing the selected items from the list passed as `options`.\n\nTo deselect items, remove them from the list passed back via the `onChange` callback and re-render the `FilteredMultiSelect` with the new list passed as its `selectedOptions` prop.\n\nDouble-clicking will add the selected option to the selection.\n\n## Install\n\n**Node**\n\n```\nnpm install react-filtered-multiselect\n```\n\n```javascript\nimport FilteredMultiSelect from 'react-filtered-multiselect'\n// or\nconst FilteredMultiSelect = require('react-filtered-multiselect')\n```\n\n**Browser**\n\nBrowser bundles export a global ``FilteredMultiSelect`` variable and expect to find a global ``React`` variable to work with.\n\n* [react-filtered-multiselect.js](https://unpkg.com/react-filtered-multiselect/umd/react-filtered-multiselect.js) (development version)\n* [react-filtered-multiselect.min.js](https://unpkg.com/react-filtered-multiselect/umd/react-filtered-multiselect.min.js) (compressed production version)\n\n## API\n\n### Required props\n\nMinimal usage:\n\n```js\nlet options = [\n  {value: 1, text: 'Item One'},\n  {value: 2, text: 'Item Two'}\n]\n\n\u003cFilteredMultiSelect\n  onChange={this.handleChange}\n  options={options}\n/\u003e\n```\n\n`options` - list of objects providing `\u003coption\u003e` data for the multi-select. By default, these should have ``text`` and ``value`` properties, but this is configurable via props.\n\nThe component will update its display if its `options` list changes length or is replaced with a different list, but it will *not* be able to detect changes which don't affect length or object equality, such as replacement of one option with another. Consider using [immutability-helper](https://github.com/kolodny/immutability-helper) or other immutability libraries if you need to do this.\n\n`onChange(selectedOptions)` - callback which will be called with selected option objects each time the selection is added to.\n\n### Optional props\n\n`buttonText` - text to be displayed in the `\u003cbutton\u003e` for adding selected `\u003coption\u003e`s.\n\n`className` - class name for the component's `\u003cdiv\u003e` container.\n\n`classNames` - class names for each of the component's child elements. See the default props below for properties. Defaults will be used for any properties not specified via this prop.\n\n`defaultFilter` - default filter text to be applied to the `\u003cselect\u003e`\n\n`disabled` - disables each child element if `true`.\n\n`placeholder` - placeholder text to be displayed in the filter `\u003cinput\u003e`.\n\n`selectedOptions` - list of option objects which are selected, so should no\nlonger be displayed in the `\u003cselect\u003e`.\n\n`showFilter` - pass `false` to disable showing the filter input if you just use this component for selection.\n\n`size` - `size` attribute for the `\u003cselect\u003e`\n\n`textProp` - name of the property in each object in `options` which provides\nthe displayed text for its `\u003coption\u003e`.\n\n`valueProp` - name of the property in each object in `options` which provides\nthe `value` for its `\u003coption\u003e`.\n\n### Default props\n\n```js\n{\n  buttonText: 'Select',\n  className: 'FilteredMultiSelect',\n  classNames: {\n    button: 'FilteredMultiSelect__button',\n    // Used when at least one \u003coption\u003e is selected\n    buttonActive: 'FilteredMultiSelect__button--active',\n    filter: 'FilteredMultiSelect__filter',\n    select: 'FilteredMultiSelect__select'\n  }\n  defaultFilter: '',\n  disabled: false,\n  placeholder: 'type to filter',\n  selectedOptions: [],\n  showFilter: true,\n  size: 6,\n  textProp: 'text',\n  valueProp: 'value'\n}\n```\n\n## Example\n\nExample which implements display of selected items and de-selection.\n\n```js\nconst CULTURE_SHIPS = [\n  {id: 1, name: '5*Gelish-Oplule'},\n  {id: 2, name: '7*Uagren'},\n// ...\n  {id: 249, name: 'Zero Gravitas'},\n  {id: 250, name: 'Zoologist'}\n]\n\nclass Example extends React.Component {\n  state = {selectedShips: []}\n\n  handleDeselect(index) {\n    var selectedShips = this.state.selectedShips.slice()\n    selectedShips.splice(index, 1)\n    this.setState({selectedShips})\n  }\n\n  handleSelectionChange = (selectedShips) =\u003e {\n    this.setState({selectedShips})\n  }\n\n  render() {\n    var {selectedShips} = this.state\n    return \u003cdiv\u003e\n      \u003cFilteredMultiSelect\n        onChange={this.handleSelectionChange}\n        options={CULTURE_SHIPS}\n        selectedOptions={selectedShips}\n        textProp=\"name\"\n        valueProp=\"id\"\n      /\u003e\n      {selectedShips.length === 0 \u0026\u0026 \u003cp\u003e(nothing selected yet)\u003c/p\u003e}\n      {selectedShips.length \u003e 0 \u0026\u0026 \u003cul\u003e\n        {selectedShips.map((ship, i) =\u003e \u003cli key={ship.id}\u003e\n          {`${ship.name} `}\n          \u003cbutton type=\"button\" onClick={() =\u003e this.handleDeselect(i)}\u003e\n            \u0026times;\n          \u003c/button\u003e\n        \u003c/li\u003e)}\n      \u003c/ul\u003e}\n    \u003c/div\u003e\n  }\n}\n```\n## MIT Licensed\n\n[build-badge]: https://img.shields.io/travis/insin/react-filtered-multiselect/master.png?style=flat-square\n[build]: https://travis-ci.org/insin/react-filtered-multiselect\n\n[npm-badge]: https://img.shields.io/npm/v/react-filtered-multiselect.png?style=flat-square\n[npm]: https://www.npmjs.org/package/react-filtered-multiselect\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Freact-filtered-multiselect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finsin%2Freact-filtered-multiselect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Freact-filtered-multiselect/lists"}