https://github.com/VovanR/react-multiselect-two-sides

React multiselect two sides component
https://github.com/VovanR/react-multiselect-two-sides

react react-component

Last synced: 3 months ago
JSON representation

React multiselect two sides component

• Host: GitHub
• URL: https://github.com/VovanR/react-multiselect-two-sides
• Owner: VovanR
• License: mit
• Created: 2016-05-19T19:50:02.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-30T04:58:28.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T12:13:35.380Z (7 months ago)
• Topics: react, react-component
• Language: JavaScript
• Homepage: https://vovanr.github.io/react-multiselect-two-sides
• Size: 671 KB
• Stars: 15
• Watchers: 4
• Forks: 11
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-multiselect-two-sides

[![Commitizen friendly][commitizen-image]][commitizen-url]

[![XO code style][codestyle-image]][codestyle-url]

[![NPM version][npm-image]][npm-url]

[![Build Status][travis-image]][travis-url]

> React multiselect two sides component

Demo: [vovanr.github.io/react-multiselect-two-sides][demo]

![](preview.png)

## Install

```shell

npm install --save react-multiselect-two-sides

```

## Usage

See: [example](example/app.jsx)

```js

class App extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      options: [

        {name: 'Foo', value: 0},

        {name: 'Bar', value: 1},

        {name: 'Baz', value: 2, disabled: true},

        {name: 'Qux', value: 3},

        {name: 'Quux', value: 4},

        {name: 'Corge', value: 5},

        {name: 'Grault', value: 6},

        {name: 'Garply', value: 7},

        {name: 'Waldo', value: 8},

        {name: 'Fred', value: 9},

        {name: 'Plugh', value: 10},

        {name: 'Xyzzy', value: 11},

        {name: 'Thud', value: 12}

      ],

      value: [0, 3, 9]

    };

  },

  handleChange = (value) => {

    this.setState({value});

  }

  render() {

    const {options, value} = this.state;

    const selectedCount = value.length;

    const availableCount = options.length - selectedCount;

    return (

      

    );

  }

}

ReactDOM.render(, document.getElementById('app'));

```

## Api

```js

MultiselectTwoSides.propTypes = {

  availableFooter: PropTypes.node,

  availableHeader: PropTypes.node,

  className: PropTypes.string,

  clearFilterText: PropTypes.string,

  clearable: PropTypes.bool,

  deselectAllText: PropTypes.string,

  disabled: PropTypes.bool,

  filterBy: PropTypes.func,

  filterComponent: PropTypes.func,

  highlight: PropTypes.array,

  labelKey: PropTypes.string,

  limit: PropTypes.number,

  onChange: PropTypes.func,

  options: PropTypes.array,

  placeholder: PropTypes.string,

  searchable: PropTypes.bool,

  selectAllText: PropTypes.string,

  selectedFooter: PropTypes.node,

  selectedHeader: PropTypes.node,

  showControls: PropTypes.bool,

  value: PropTypes.array,

  valueKey: PropTypes.string

};

MultiselectTwoSides.defaultProps = {

  availableFooter: null,

  availableHeader: null,

  className: null,

  clearFilterText: 'Clear',

  clearable: true,

  deselectAllText: 'Deselect all',

  disabled: false,

  // Case-insensitive filter

  filterBy: (option, filter, labelKey) => option[labelKey].toLowerCase().indexOf(filter.toLowerCase()) > -1,

  filterComponent: null,

  highlight: [],

  labelKey: 'label',

  limit: undefined,

  onChange: () => {},

  options: [],

  placeholder: '',

  searchable: false,

  selectAllText: 'Select all',

  selectedFooter: null,

  selectedHeader: null,

  showControls: false,

  value: [],

  valueKey: 'value'

};

```

## License

MIT © [Vladimir Rodkin](https://github.com/VovanR)

[demo]: https://vovanr.github.io/react-multiselect-two-sides

[commitizen-url]: https://commitizen.github.io/cz-cli/

[commitizen-image]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square

[codestyle-url]: https://github.com/sindresorhus/xo

[codestyle-image]: https://img.shields.io/badge/code_style-XO-5ed9c7.svg?style=flat-square

[npm-url]: https://npmjs.org/package/react-multiselect-two-sides

[npm-image]: https://img.shields.io/npm/v/react-multiselect-two-sides.svg?style=flat-square

[travis-url]: https://travis-ci.org/VovanR/react-multiselect-two-sides

[travis-image]: https://img.shields.io/travis/VovanR/react-multiselect-two-sides.svg?style=flat-square