# @joenied/select2

> ### Demo

Latest version **1.0.5** (published 2019-09-03) · 0 weekly downloads

## Install

```sh
npm install @joenied/select2
pnpm add @joenied/select2
yarn add @joenied/select2
bun add @joenied/select2
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2019-09-03 |
| First published | 2019-09-02 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 30 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | joenied |
| Keywords | select |

## Links

- npm: https://www.npmjs.com/package/@joenied/select2
- Repository: https://github.com/Joebob12/Select2
- Homepage: https://github.com/Joebob12/Select2#readme
- Issues: https://github.com/Joebob12/Select2/issues
- npm.io page: https://npm.io/package/@joenied/select2

## Dependencies (3)

- [react](https://npm.io/package/react.md) 16.8.6
- [react-dom](https://npm.io/package/react-dom.md) 16.8.6
- [react-scripts](https://npm.io/package/react-scripts.md) 3.0.1

## Recent versions

- 1.0.5 (latest) — 2019-09-03
- 1.0.4 — 2019-09-03
- 1.0.3 — 2019-09-02
- 1.0.2 — 2019-09-02
- 1.0.1 — 2019-09-02
- 1.0.0 — 2019-09-02

## README

## React Select2 Component

### Demo

https://codesandbox.io/s/new-ruyxe

### Installation

`npm install @joenied/select2 --save`

### How To Use

First import this component where you want to use it

`import { Select2 } from "@joenied/select2";`
`import "@joenied/select2/dist/select.css";`

Then just render it

```
    <Select2 
        selected={e => doThingsWithValue(e)} 
        options={[ 
            { label: "one", value: "one" },
            { label: "two", value: "two" }
        ]}
    />
```

### Props

| _Prop_      |                    _Description_                    | _Default value_ |
| ----------- | :-------------------------------------------------: | :-------------: |
| options     | an array of objects with label and value properties |   empty array   |
| multiSelect |         Allow selecting of multiple options         |      false      |
| selected    |         Get the value and do stuff with it          |      null       |

### Example

```
import React, { Component } from "react";
import { Select2 } from "@joenied/select2";
import "@joenied/select2/dist/select.css";

class App extends Component {
  render() {
    return (
        <Select2
          selected={e => doThingsWithValue(e)}
          options={[
            { label: "one", value: "one", optgroup: "numbers" },
            { label: "two", value: "two", optgroup: "numbers" },
            { label: "three", value: "three", optgroup: "numbers" },
            { label: "A", value: "A", optgroup: "letters" },
            { label: "B", value: "B", optgroup: "letters" },
            { label: "C", value: "C", optgroup: "letters" }
          ]}
        />
    );
  }
}

export default App;
```

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