# multi-select-react

> Multi Select React – A React Component providing multi select and single select functionality.

Latest version **0.1.8** (published 2017-08-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install multi-select-react
pnpm add multi-select-react
yarn add multi-select-react
bun add multi-select-react
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.8 |
| Published | 2017-08-22 |
| First published | 2017-08-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ganesh khaire |
| Maintainers | ganesh-91 |
| Keywords | react-multi-select-dropdown, multiselect, react-select-multi, react-select-multiple, react-multi-select, react-multiple-select, react-multi-options, react-component |

## Links

- npm: https://www.npmjs.com/package/multi-select-react
- Repository: https://github.com/ganesh-91/multi-select-react
- Homepage: https://github.com/ganesh-91/multi-select-react#readme
- Issues: https://github.com/ganesh-91/multi-select-react/issues
- npm.io page: https://npm.io/package/multi-select-react

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^15.5.4
- [webpack](https://npm.io/package/webpack.md) ^2.6.1

## Recent versions

- 0.1.8 (latest) — 2017-08-22
- 0.1.6 — 2017-08-21
- 0.1.5 — 2017-08-18
- 0.1.3 — 2017-08-18
- 0.1.2 — 2017-08-16
- 0.1.0 — 2017-08-16
- 0.0.2 — 2017-08-16

## README

# multi-select-react

## Description
A React Component providing multi select and single select functionality.(under development)

----
## Installation
```
npm install multi-select-react
```
----
## Demo
[Multi-select-react](https://ganesh-91.github.io/multi-select-react/)

----
## 1. Basic Usage
```js
import React, { Component } from 'react';
import  MultiSelectReact  from 'multi-select-react';

class MyComponent extends Component {
  constructor() {
        super();
        this.state = {
            multiSelect: []
        };
    }
  render() {
        const selectedOptionsStyles = {
            color: "#3c763d",
            backgroundColor: "#dff0d8"
        };
        const optionsListStyles = {
            backgroundColor: "#dff0d8",
            color: "#3c763d"
        };
    return (
      <MultiSelectReact 
      options={this.state.multiSelect}
      optionClicked={this.optionClicked.bind(this)}
      selectedBadgeClicked={this.selectedBadgeClicked.bind(this)}
      selectedOptionsStyles={selectedOptionsStyles}
      optionsListStyles={optionsListStyles} />
    );
  }

  optionClicked(optionsList) {
        this.setState({ multiSelect: optionsList });
  }
  selectedBadgeClicked(optionsList) {
        this.setState({ multiSelect: optionsList });
  }

}
```

## 2. Single Select
```js
import React, { Component } from 'react';
import  MultiSelectReact  from 'multi-select-react';

class MyComponent extends Component {
  constructor() {
        super();
        this.state = {
            multiSelect: []
        };
    }
  render() {
        const selectedOptionsStyles = {
            color: "#3c763d",
            backgroundColor: "#dff0d8"
        };
        const optionsListStyles = {
            backgroundColor: "#dff0d8",
            color: "#3c763d"
        };
    return (
      <MultiSelectReact 
      options={this.state.multiSelect}
      optionClicked={this.optionClicked.bind(this)}
      selectedBadgeClicked={this.selectedBadgeClicked.bind(this)}
      selectedOptionsStyles={selectedOptionsStyles}
      optionsListStyles={optionsListStyles}
      isSingleSelect={true} />
    );
  }

  optionClicked(optionsList) {
        this.setState({ multiSelect: optionsList });
  }
  selectedBadgeClicked(optionsList) {
        this.setState({ multiSelect: optionsList });
  }

}
```
Default value for isSingleSelect is false, for using this component as normal single select component set isSingleSelect to true.


## 3. Text Wrap
```js
import React, { Component } from 'react';
import  MultiSelectReact  from 'multi-select-react';

class MyComponent extends Component {
  constructor() {
        super();
        this.state = {
            multiSelect: []
        };
    }
  render() {
        const selectedOptionsStyles = {
            color: "#3c763d",
            backgroundColor: "#dff0d8"
        };
        const optionsListStyles = {
            backgroundColor: "#dff0d8",
            color: "#3c763d"
        };
    return (
      <MultiSelectReact 
      options={this.state.multiSelect}
      optionClicked={this.optionClicked.bind(this)}
      selectedBadgeClicked={this.selectedBadgeClicked.bind(this)}
      selectedOptionsStyles={selectedOptionsStyles}
      optionsListStyles={optionsListStyles}
      isTextWrap={true} />
    );
  }

  optionClicked(optionsList) {
        this.setState({ multiSelect: optionsList });
  }
  selectedBadgeClicked(optionsList) {
        this.setState({ multiSelect: optionsList });
  }

}
```
Default value for isTextWarp is true, for component to grow vertically and display all options selected set isTextWarp to false.

----

## Props

| Prop  | Type  | Default | Description |
|:--------- | :---- | :----   |:----  |
| `selectedOptionsColor` | `object` | `{}` | CSS for MultiSelect options selected badges
| `optionsListStyles` | `object` | `{}` | CSS for MultiSelect options drop down
| `options` | `array` | R | Options to be pre-populated in select
| `optionClicked` | `function` | R | Callback, invoked after an option is clicked
| `selectedBadgeClicked` | `function` | R | Callback, invoked after an selected option badge
| `isSingleSelect` | `boolean` | Optional | Boolean value for single select functionality, component's default behavior is multi select
| `isTextWrap` | `boolean` | Optional | Boolean value for text wrap i.e selected option will expand horizontally

## Licence

[MIT]

---
_Source: https://npm.io/package/multi-select-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._