docs/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Home</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Home</h1>
<h3> </h3>
<section>
<article><h1>react-bootstrap-combobox</h1><p><em>A combo-box component for React Bootstrap.</em></p>
<p><a href="https://github.com/thealjey/react-bootstrap-combobox">Project Home</a>
|
<a href="https://thealjey.github.io/react-bootstrap-combobox">API Docs</a></p>
<p><a href="https://travis-ci.org/thealjey/react-bootstrap-combobox"><img src="https://travis-ci.org/thealjey/react-bootstrap-combobox.svg?branch=master" alt="Build Status"></a>
<a href="https://coveralls.io/github/thealjey/react-bootstrap-combobox?branch=master"><img src="https://coveralls.io/repos/thealjey/react-bootstrap-combobox/badge.svg?branch=master&service=github" alt="Coverage Status"></a>
<a href="https://codeclimate.com/github/thealjey/react-bootstrap-combobox"><img src="https://codeclimate.com/github/thealjey/react-bootstrap-combobox/badges/gpa.svg" alt="Code Climate"></a>
<a href="https://david-dm.org/thealjey/react-bootstrap-combobox"><img src="https://david-dm.org/thealjey/react-bootstrap-combobox.svg" alt="Dependency Status"></a>
<a href="https://david-dm.org/thealjey/react-bootstrap-combobox#info=devDependencies"><img src="https://david-dm.org/thealjey/react-bootstrap-combobox/dev-status.svg" alt="devDependency Status"></a>
<a href="https://david-dm.org/thealjey/react-bootstrap-combobox#info=peerDependencies"><img src="https://david-dm.org/thealjey/react-bootstrap-combobox/peer-status.svg" alt="peerDependency Status"></a>
<a href="http://badge.fury.io/js/react-bootstrap-combobox"><img src="https://badge.fury.io/js/react-bootstrap-combobox.svg" alt="npm version"></a>
<a href="https://webcompiler.slack.com/messages/combobox"><img src="https://img.shields.io/badge/slack-combobox-blue.svg" alt="Slack channel"></a></p>
<p>This is a very simple stateless wrapper around DropdownButton and MenuItem.</p>
<h3>Features</h3><ol>
<li>Minimizes the number of characters one would need to type when building a component in this fashion</li>
<li>Provides a good looking dropdown component, built on Twitter Bootstrap, customizable with SASS, that works and looks
the same in all major browsers</li>
<li>The dropdown menu has a maximum height automatically calculated to prevent it from overflowing the viewport</li>
<li>Provides a number of performance optimizations, both in JavaScript and CSS</li>
</ol>
<h3>Hint</h3><p>Do not forget to set the <code>NODE_ENV</code> environment variable to <strong>"production"</strong> in production to get some instant
performance increase from React for free!</p>
<h3>Installation</h3><pre class="prettyprint source"><code>npm i react-bootstrap-combobox --save</code></pre><h3>Usage</h3><p>You need to include the <strong>"_index.scss"</strong> file from this package.
If you are using <a href="https://github.com/thealjey/webcompiler">webcompiler</a> then you can simply do:</p>
<pre class="prettyprint source lang-SCSS"><code>// import Bootstrap
@import "bootstrap";
// import Bootstrap theme
@import "bootstrap/theme";
// import the component
@import "react-bootstrap-combobox";</code></pre><p>and then:</p>
<pre class="prettyprint source lang-JavaScript"><code>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} /></code></pre><h3>Caveats</h3><ol>
<li>Both <code>items</code> and <code>value</code> are required props</li>
<li>The component is stateless, which means that its <code>value</code> cannot be changed without re-rendering it</li>
<li>For performance reasons <code>items</code> are considered immutable</li>
</ol></article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Combo.html">Combo</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.3</a>
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>