# react-select-x

> Simple React Select Component

Latest version **1.2.2** (published 2019-02-01) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2019-02-01 |
| First published | 2019-01-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 43 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Duleep Kodithuwakku |
| Maintainers | dnkodi |
| Keywords | combobox, form, input, multiselect, react, react-component, react-select, select |

## Links

- npm: https://www.npmjs.com/package/react-select-x
- Repository: https://github.com/dnkodi/react-select-x
- Homepage: https://dnkodi.github.io/react-select-x/
- Issues: https://github.com/dnkodi/react-select-x/issues
- npm.io page: https://npm.io/package/react-select-x

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.2 (latest) — 2019-02-01
- 1.2.1 — 2019-01-30
- 1.2.0 — 2019-01-30
- 1.1.0 — 2019-01-30
- 1.0.0 — 2019-01-24

## README

# React Select X

An awesome react select component.

## Demo

[https://dnkodi.github.io/react-select-x/](https://dnkodi.github.io/react-select-x/)


## Installation

```bash
$ npm install react-select-x --save
```

After this you can import react-select-x and its styles in your application as follows:

```js
import { Select, MultiSelect } from 'react-select-x';

//Include styles at your root and make sure you have necessary loaders to handle css
import 'react-select-x/dist/styles.css';
```

## Usage

### Select Component

```js
import React from 'react';
import { Select } from 'react-select-x';

const list = [
    { value: "LBJ", label: "Lebron James" },
    { value: "SC", label: "Stepehen Curry" },
    { value: "JH", label: "James Harden" }
]

class App extends React.Component {
  state = {
    selectedValue: "",
  }

  handleClick = (value) => {
    this.setState({
            selectedValue: value
    })
    console.log(`Option selected:`, selectedValue);
  }

  render() {
    const { selectedValue } = this.state;

    return (
      <Select
        label="Select"
        name="single-select"
        onChange={this.handleClick}
        options={list}
        placeholder="-Select-"
        value={selectedValue}
      />
    );
  }
}
```
### MultiSelect Component

```js
import React from 'react';
import { MultiSelect } from 'react-select-x';

const list = [
    { value: "LBJ", label: "Lebron James" },
    { value: "SC", label: "Stepehen Curry" },
    { value: "JH", label: "James Harden" }
]

class App extends React.Component {
  state = {
    selectedValues: [],
  }

  handleItemsClick(value) {
    this.setState({
        selectedValues: value
    })
  }

  render() {
    const { selectedValues } = this.state;

    return (
      <MultiSelect
        label="Multi-Select"
        name="multi-select"
        onChange={this.handleItemsClick}
        options={list}
        placeholder="-Select-"
        value={selectedValues}
      />
    );
  }
}
```

### Props

| Prop | Type | Description
:---|:---|:---
| `disabled` | bool | disable select control |
| `errorText` | string | text to display for an error |
| `inline` | bool | make the select inline |
| `label` | string | pass the label text |
| `margin` | string | add margins to component if necessary |
| `name` | string | generate an HTML input with this name |
| `onChange` | function | subscribe to change events |
| `options` | array | specify the options the user can select from |
| `placeholder` | string | change the text displayed when no option is selected |
| `readOnly` | bool | read only for the select component |
| `searchable` | bool | allow the user to search for matching options |
| `value` | string | control the current value |
| `width` | string | control width of the component |


### TODO

At the moment react-select-x does not handle loading of options asynchronously so this needs to be implemented and few other more features as well. Feel free to raise an issue if you run into something. PR's are most welcome. This repos is still in its early stage. :)

## Development

```bash
$ git clone https://github.com/dnkodi/react-select-x.git
$ npm install
```

### Start the dev server

```bash
$ npm start
```

Defaults to port `8080`.

## Thanks

This component was inspired by: [react-select](https://github.com/JedWatson/react-select) a lovely select component done by Jed Watson. And many thanks to my collegues [Michael Raymond](https://www.linkedin.com/in/michael-raymond-681669107/) (the maestro) and [Deegha Galkissa](https://github.com/deegha) for helping to get this component from scratch.


## License

MIT Licensed. Copyright (c) Duleep Kodithuwakku 2019.

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