Package Exports

react-bootstrap

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) 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

Bootstrap 3 components built with React

Contributors

Huge contributions from syllog1sm (blog)
Pieter Vanderwerff

Currently implemented (but under active development)

Button
DropdownButton
MenuItem
TabbedArea, TabPane, Tab
CollapsePanel
Alert
SplitButton

Button

var Button = require('react-bootstrap/cjs/Button');

<Button onClick={handleClick}>Title</Button>

DropdownButton

var DropdownButton = require('react-bootstrap/cjs/DropdownButton');
var MenuItem       = require('react-bootstrap/cjs/MenuItem');

function handleSelect (selectedIndex) {
}

<DropdownButton title="Title" onSelect={handleSelect}>
  <MenuItem key="1">MenuItem 1 content</MenuItem>
  <MenuItem key="2">MenuItem 2 content</MenuItem>
</DropdownButton>

Tabs

Controlled

var TabbedArea = require('react-bootstrap/cjs/TabbedArea');
var TabPane    = require('react-bootstrap/cjs/TabPane');

var key = 1;

function handleSelect (selectedKey) {
  key = selectedKey;
}

<TabbedArea title="Title" activeKey={key} onSelect={handleSelect}>
  <TabPane tab="Tab 1" key={1}>TabPane 1 content</TabPane>
  <TabPane tab={<strong>Tab 2</strong>} key={2}>TabPane 2 content</TabPane>
</TabbedArea>

Uncontrolled

var TabbedArea = require('react-bootstrap/cjs/TabbedArea');
var TabPane    = require('react-bootstrap/cjs/TabPane');

<TabbedArea title="Title" initialActiveKey={1}>
  <TabPane tab="Tab 1" key={1}>TabPane 1 content</TabPane>
  <TabPane tab={<strong>Tab 2</strong>} key={2}>TabPane 2 content</TabPane>
</TabbedArea>

Alert

var Alert = require('react-bootstrap/cjs/Alert');

function handleDismiss () {
}

<Alert bsStyle="danger" onDismiss={handleDismiss} dismissAfter={5000}>
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</Alert>

CollapsePanel

var CollapsePanel = require('react-bootstrap/cjs/CollapsePanel')

TODO docs

MenuItem

var MenuItem = require('react-bootstrap/cjs/MenuItem');

function handleSelect (key) {
}

<MenuItem key={1} bsVariation="[divider|header]" onSelect={handleSelect}>Content</MenuItem>

Up next

Label
Accordion
Nav, NavItem
Pagination, Pager
Modal