{"id":21883906,"url":"https://github.com/vovanr/react-multiselect-two-sides","last_synced_at":"2025-07-21T10:03:18.891Z","repository":{"id":8665101,"uuid":"59237826","full_name":"VovanR/react-multiselect-two-sides","owner":"VovanR","description":"React multiselect two sides component","archived":false,"fork":false,"pushed_at":"2022-12-30T04:58:28.000Z","size":687,"stargazers_count":15,"open_issues_count":24,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-22T03:37:53.537Z","etag":null,"topics":["react","react-component"],"latest_commit_sha":null,"homepage":"https://vovanr.github.io/react-multiselect-two-sides","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/VovanR.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.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":"2016-05-19T19:50:02.000Z","updated_at":"2022-12-28T16:11:50.000Z","dependencies_parsed_at":"2023-01-11T17:26:40.862Z","dependency_job_id":null,"html_url":"https://github.com/VovanR/react-multiselect-two-sides","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/VovanR/react-multiselect-two-sides","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VovanR%2Freact-multiselect-two-sides","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VovanR%2Freact-multiselect-two-sides/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VovanR%2Freact-multiselect-two-sides/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VovanR%2Freact-multiselect-two-sides/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VovanR","download_url":"https://codeload.github.com/VovanR/react-multiselect-two-sides/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VovanR%2Freact-multiselect-two-sides/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266278205,"owners_count":23904038,"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":["react","react-component"],"created_at":"2024-11-28T09:47:24.285Z","updated_at":"2025-07-21T10:03:18.874Z","avatar_url":"https://github.com/VovanR.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-multiselect-two-sides\n\n[![Commitizen friendly][commitizen-image]][commitizen-url]\n[![XO code style][codestyle-image]][codestyle-url]\n\n[![NPM version][npm-image]][npm-url]\n[![Build Status][travis-image]][travis-url]\n\n\u003e React multiselect two sides component\n\nDemo: [vovanr.github.io/react-multiselect-two-sides][demo]\n\n![](preview.png)\n\n## Install\n\n```shell\nnpm install --save react-multiselect-two-sides\n```\n\n## Usage\nSee: [example](example/app.jsx)\n\n```js\nclass App extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      options: [\n        {name: 'Foo', value: 0},\n        {name: 'Bar', value: 1},\n        {name: 'Baz', value: 2, disabled: true},\n        {name: 'Qux', value: 3},\n        {name: 'Quux', value: 4},\n        {name: 'Corge', value: 5},\n        {name: 'Grault', value: 6},\n        {name: 'Garply', value: 7},\n        {name: 'Waldo', value: 8},\n        {name: 'Fred', value: 9},\n        {name: 'Plugh', value: 10},\n        {name: 'Xyzzy', value: 11},\n        {name: 'Thud', value: 12}\n      ],\n      value: [0, 3, 9]\n    };\n  },\n\n  handleChange = (value) =\u003e {\n    this.setState({value});\n  }\n\n  render() {\n    const {options, value} = this.state;\n    const selectedCount = value.length;\n    const availableCount = options.length - selectedCount;\n\n    return (\n      \u003cMultiselectTwoSides\n        {...this.state}\n        className=\"msts_theme_example\"\n        onChange={this.handleChange}\n        availableHeader=\"Available\"\n        availableFooter={`Available: ${availableCount}`}\n        selectedHeader=\"Selected\"\n        selectedFooter={`Selected: ${selectedCount}`}\n        labelKey=\"name\"\n        showControls\n        searchable\n      /\u003e\n    );\n  }\n}\n\nReactDOM.render(\u003cApp/\u003e, document.getElementById('app'));\n```\n\n## Api\n\n```js\nMultiselectTwoSides.propTypes = {\n  availableFooter: PropTypes.node,\n  availableHeader: PropTypes.node,\n  className: PropTypes.string,\n  clearFilterText: PropTypes.string,\n  clearable: PropTypes.bool,\n  deselectAllText: PropTypes.string,\n  disabled: PropTypes.bool,\n  filterBy: PropTypes.func,\n  filterComponent: PropTypes.func,\n  highlight: PropTypes.array,\n  labelKey: PropTypes.string,\n  limit: PropTypes.number,\n  onChange: PropTypes.func,\n  options: PropTypes.array,\n  placeholder: PropTypes.string,\n  searchable: PropTypes.bool,\n  selectAllText: PropTypes.string,\n  selectedFooter: PropTypes.node,\n  selectedHeader: PropTypes.node,\n  showControls: PropTypes.bool,\n  value: PropTypes.array,\n  valueKey: PropTypes.string\n};\n\nMultiselectTwoSides.defaultProps = {\n  availableFooter: null,\n  availableHeader: null,\n  className: null,\n  clearFilterText: 'Clear',\n  clearable: true,\n  deselectAllText: 'Deselect all',\n  disabled: false,\n  // Case-insensitive filter\n  filterBy: (option, filter, labelKey) =\u003e option[labelKey].toLowerCase().indexOf(filter.toLowerCase()) \u003e -1,\n  filterComponent: null,\n  highlight: [],\n  labelKey: 'label',\n  limit: undefined,\n  onChange: () =\u003e {},\n  options: [],\n  placeholder: '',\n  searchable: false,\n  selectAllText: 'Select all',\n  selectedFooter: null,\n  selectedHeader: null,\n  showControls: false,\n  value: [],\n  valueKey: 'value'\n};\n```\n\n## License\nMIT © [Vladimir Rodkin](https://github.com/VovanR)\n\n[demo]: https://vovanr.github.io/react-multiselect-two-sides\n\n[commitizen-url]: https://commitizen.github.io/cz-cli/\n[commitizen-image]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square\n\n[codestyle-url]: https://github.com/sindresorhus/xo\n[codestyle-image]: https://img.shields.io/badge/code_style-XO-5ed9c7.svg?style=flat-square\n\n[npm-url]: https://npmjs.org/package/react-multiselect-two-sides\n[npm-image]: https://img.shields.io/npm/v/react-multiselect-two-sides.svg?style=flat-square\n\n[travis-url]: https://travis-ci.org/VovanR/react-multiselect-two-sides\n[travis-image]: https://img.shields.io/travis/VovanR/react-multiselect-two-sides.svg?style=flat-square\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvovanr%2Freact-multiselect-two-sides","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvovanr%2Freact-multiselect-two-sides","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvovanr%2Freact-multiselect-two-sides/lists"}