# @opuscapita/react-floating-select

> OpusCapita floating select

Latest version **4.0.2** (published 2019-10-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @opuscapita/react-floating-select
pnpm add @opuscapita/react-floating-select
yarn add @opuscapita/react-floating-select
bun add @opuscapita/react-floating-select
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.2 |
| Published | 2019-10-09 |
| First published | 2017-09-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=6.10.0 |
| Dependencies | 4 |
| Unpacked size | 9.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | OpusCapita |
| Maintainers | adam-dziomdziora-cybercom, alexanderdanilov, alexeysergeev, amourzenkov-sc, bo-kh, dmitriy.sanko, dmitrydivin, dsanko, egor.stambakio, elefantino, eriihine, gr4per, havantkim, ilkkalehtinen, janek.bug, jenni, jluukka, kaputse, kirillvolkovich, kwierchris, lukaszkepa, naniantero, nczeranka, nkovalenko-sc, ocmachineuser, pdetmer, samikarj, tamkov-sc, zjuice |

## Links

- npm: https://www.npmjs.com/package/@opuscapita/react-floating-select
- Repository: https://github.com/OpusCapita/react-floating-select
- Homepage: https://github.com/OpusCapita/react-floating-select#readme
- Issues: https://github.com/OpusCapita/react-floating-select/issues
- npm.io page: https://npm.io/package/@opuscapita/react-floating-select

## Dependencies (4)

- [react-icons](https://npm.io/package/react-icons.md) 3.6.1
- [react-select](https://npm.io/package/react-select.md) 3.0.5
- [react-infinite](https://npm.io/package/react-infinite.md) 0.13.0
- [@opuscapita/oc-cm-theme](https://npm.io/package/@opuscapita/oc-cm-theme.md) 0.2.0

## Recent versions

- 4.0.2 (latest) — 2019-10-09
- 4.0.1 — 2019-10-08
- 4.0.0 — 2019-09-30
- 3.7.0 — 2019-09-29
- 3.6.4 — 2019-08-12
- 3.6.3 — 2019-06-11
- 3.6.2 — 2019-05-20
- 3.6.1 — 2019-04-17
- 3.6.0 — 2019-04-11
- 3.5.2 — 2019-04-11
- 3.5.1 — 2019-04-05
- 3.5.0 — 2019-03-21
- 3.4.1 — 2019-02-20
- 3.4.0 — 2019-01-30
- 3.3.2 — 2019-01-30
- … 17 more at https://npm.io/package/@opuscapita/react-floating-select/versions

## README

# react-floating-select

### Description
Originally this component was introduced in order to enhance react-select by fixing [bug#810](https://github.com/JedWatson/react-select/issues/810). When react-select was upgraded to version 2.0.0, the original need for this component disappeared. Since react-select v2.0.0 this component is needed for specifying OC specific styles for the floating select component.

### Installation
```
npm install @opuscapita/react-floating-select
```

### Demo
View the [Demo](https://opuscapita.github.io/react-floating-select)

### Change log
View the [Change log](CHANGELOG.md)

### Migrate guide
View the [Migrate guide](MIGRATEGUIDE.md) between major versions

### Builds
#### UMD
The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.
#### CommonJS/ES Module
You need to configure your module loader to use `cjs` or `es` fields of the package.json to use these module types.
Also you need to configure sass loader, since all the styles are in sass format.
* With webpack use [resolve.mainFields](https://webpack.js.org/configuration/resolve/#resolve-mainfields) to configure the module type.
* Add [SASS loader](https://github.com/webpack-contrib/sass-loader) to support importing of SASS styles.

### Exported components
* FloatingSelect
* FloatingSelectCreatable
* FloatingSelectInfinite
* FloatingSelectPortal **will be removed**
* FloatingSelectPortalCreatable **will be removed**

### API
* [react-select props](https://react-select.com/props)
* [Grouped options](https://github.com/JedWatson/react-select/issues/2417)

| Prop name     | Type   | Default | Description                                                   |
| ------------- | ------ | ------- | ------------------------------------------------------------- |
| name          | string |         | It's recommended to give unique name for select component     |
| controlHeight | string |         | Custom height of the control                                  |
| customStyles  | object | {}      | Custom [style functions](https://react-select.com/styles) to be merged with default style functions |

### Code example
```jsx
import React from 'react';
import { FloatingSelect } from '@opuscapita/react-floating-select';
import myOptions from './my-options';

export default class ReactView extends React.Component {
  state = {
    value: null,
  }

  handleOnChange = value => this.setState({ value })

  render() {
    return (
      <FloatingSelect
        name="my-select"
        options={myOptions}
        value={this.state.value}
        onChange={this.handleOnChange}
      />
    );
  }
}
```

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