@opuscapita/react-floating-select

OpusCapita floating select

Stats

StarsIssuesVersionUpdatedCreatedSize
@opuscapita/react-floating-select
104.0.22 years ago4 years agoMinified + gzip package size for @opuscapita/react-floating-select in KB

Readme

react-floating-select

Description

Originally this component was introduced in order to enhance react-select by fixing bug#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

Change log

View the Change log

Migrate guide

View the Migrate guide 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.

Exported components

  • FloatingSelect
  • FloatingSelectCreatable
  • FloatingSelectInfinite
  • FloatingSelectPortal will be removed
  • FloatingSelectPortalCreatable will be removed

API

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 to be merged with default style functions

Code example

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}
      />
    );
  }
}

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.