Package Exports

react-bootstrap-combobox

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-bootstrap-combobox) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-bootstrap-combobox

A combo-box component for React Bootstrap.

Project Home | API Docs

This is a very simple stateless wrapper around DropdownButton and MenuItem.

Features

Minimizes the number of characters one would need to type when building a component in this fashion
Provides a good looking dropdown component, built on Twitter Bootstrap, customizable with SASS, that works and looks the same in all major browsers
The dropdown menu has a maximum height automatically calculated to prevent it from overflowing the viewport
Provides a number of performance optimizations, both in JavaScript and CSS

Hint

Do not forget to set the NODE_ENV environment variable to "production" in production to get some instant performance increase from React for free!

Installation

npm i react-bootstrap-combobox --save

Usage

You need to include the "_index.scss" file from this package. If you are using webcompiler then you can simply do:

// import Bootstrap
@import "bootstrap";
// import Bootstrap theme
@import "bootstrap/theme";
// import the component
@import "react-bootstrap-combobox";

and then:

import {Combo} from 'react-bootstrap-combobox';

function someFunc(key: string) {
  ...
}

<Combo items={{
  // keys must be unique
  sweden: {label: 'Sweden', header: true}, // any combination of props supported by MenuItem
  volvo: 'Volvo',                          // same as {label: 'Volvo'}
  saab: 'Saab',
  separator: '-',                          // same as {divider: true}
  germany: {label: 'Germany', header: true},
  mercedes: 'Mercedes',
  audi: 'Audi'
}} value="volvo" onChange={someFunc} />

Caveats

Both items and value are required props
The component is stateless, which means that its value cannot be changed without re-rendering it
For performance reasons items are considered immutable