How to use react-bootstrap - 10 common examples

var React = require('react');
var ReactIntl = require('react-intl');
var ReactBootstrap = require('react-bootstrap');

var Icon = require('./Icon');

var Button = ReactBootstrap.Button;

var SVGDownloadButton = React.createClass({

  mixins: [
    ReactIntl.IntlMixin,
  ],

  getDefaultProps: function() {
    return {
      className: 'btn btn-primary',
      onClick: (e) => null,
    };
  },

  onClick: function(e) {
    // IE workaround for not supporting the download anchor attribute

/**
 * @jsx React.DOM
 */

var React = require('react');
var $ = require('jquery');
var numeral = require('numeral');
var Router = require('react-router');
var Moment = require('moment');
var Mt = window.Mousetrap;
var _ = require('lodash');
require('../libs/bootstrap-datepicker');
var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
var ReactBootStrap = require('react-bootstrap');
var Modal = ReactBootStrap.Modal;
var ModalTrigger = ReactBootStrap.ModalTrigger;
var ButtonToolbar = ReactBootStrap.ButtonToolbar;
var Button = ReactBootStrap.Button;
var Link = Router.Link;

/* Components */
var LogEditor = require('../components/editor/LogEditor');
var SearchBox = require('../components/SearchBox');
var Notify = require('../components/Notify');
var Progress = require('../components/Progress');
var DataAPI = require('../utils/DataAPI');
var BindStore = require('../mixins/BindStore');
var LogClassPie = require('../components/LogClassPie');
var OneDayGoal =  require('../components/OneDayGoal');
var IScroll = require('../libs/iscroll');
var Swiper = require('../components/Swiper');

var React = require('react')
var db = require('level-browserify')('./mydb')
var url = require('../lib/url-checks')
var Accordion = require('react-bootstrap').Accordion
var Panel = require('react-bootstrap').Panel
var _ = require('lodash')
var $c = require('../utilities/classNames.js')

var nodemailer = require('nodemailer')
// This is your API key that you retrieve from www.mailgun.com/cp (free up to 10K monthly emails)
var mg = require('nodemailer-mailgun-transport')({
  auth: {
    api_key: 'key-7e56f671872d1e829021dd4dd39ae156',
    domain: 'sandboxc5e90e5fb9e84a9eb572c4e8c6720c67.mailgun.org'
  }
})
var nodemailerMailgun = nodemailer.createTransport(mg)

var ContactForm = React.createClass({
  getDefaultProps: function () {
    return {

'use strict';

var React = require('react');
var Panel = require('react-bootstrap').Panel;
var async = require('async');

var GranularityToggle = require('../components/granularityToggle')
var RuleSelector = require('../components/ruleSelector')
var TimeseriesChart = require('../components/timeseriesChart')

var getCurrentMetric = require('../utils/getCurrentMetric')

var clearChartTimeout;
var chartInterval;

// setChart is a helper function to asynchronously update a chart, called whenever
// new data should be pushed from the server.
// graphPanel is the GraphPanel instance to update, and unload is a boolean that
// determines whether the chart should be cleared beforehand (e.g. if datasets change)
function setChart(graphPanel, unload) {

/** @jsx React.DOM */
var _ = require('underscore'),
  $ = require('jquery'),
  moment = require('moment'),
  React = require('react'),
  RB = require('react-bootstrap'),
  Jumbotron = RB.Jumbotron,
  Button = RB.Button,
  Panel = RB.Panel,
  Well = RB.Well,
  Navbar = RB.Navbar,
  Nav = RB.Nav,
  Grid = RB.Grid,
  Row = RB.Row,
  Col = RB.Col,
  Table = RB.Table;

// for server side rendering only
// enable this for server side rendering
// this somehow affects browserify
// if(typeof window === 'undefined'){
//   var Firebase = require('firebase');
//   var FirebaseSimpleLogin = function(){};
// }

var AppView = React.createClass({
  getInitialState: function() {
    this.firebaseRef = new Firebase("//reactjsx.firebaseio.com");
    this.peopleRef = this.firebaseRef.child("people");

var React      = require('react');
var BS         = require('react-bootstrap');
var actions    = require('../actions/actions');
var Router     = require('react-router');
var Reflux     = require('reflux');
var userStore  = require('../stores/userStore');
var loginStore = require('../stores/loginStore');
var Input      = BS.Input;
var Button     = BS.Button;
var Grid       = BS.Grid;
var Row        = BS.Row;
var Col        = BS.Col;
var Panel      = BS.Panel;
var Alert      = BS.Alert;

var Spinner = require('../components/spinner.jsx');

var Login = React.createClass({
  mixins: [
    Router.Navigation,
    // Reflux.listenTo(userStore, 'loginSucc'),
    Reflux.listenTo(loginStore, 'loginErr'),
  ],
  // loginSucc: function(user){
    // this.transitionTo("home");
  // },

var React = require('react');
var $ = require('jquery');window.$ = window.Jquery = $;
var addons = require('react/addons').addons;
var cx = addons.classSet;
var numeral = require('numeral');
var Ltt = global.Ltt;
var Router = require('react-router');
var Link = Router.Link;
var State = Router.State;
var RouteHandler = Router.RouteHandler;
var Moment = require('moment');
var _ = require('lodash');
var path = require('path');
var ReactBootStrap = require('react-bootstrap');
var OverlayTrigger = ReactBootStrap.OverlayTrigger;
var Popover = ReactBootStrap.Popover;
var Button = ReactBootStrap.Button;
var Badge = ReactBootStrap.Badge;
var Q = require('q');
var config = require('./conf/config');
var PureRenderMixin = require('react/addons').addons.PureRenderMixin;

/** Components */
var Header = require('./components/Header');
var Nav = require('./components/Nav');
var EnergyBar = require('./components/EnergyBar');
var Tag = require('./components/Tag');

/* Const */
var NAV_OPEN = 'ltt__navOpen';
var EVENT = require('./constants/EventConstant');

className: "small"
      }, "Your trip results have been adjusted based on real-time information. Under normal conditions, this trip would take", ' ', _react.default.createElement("b", null, (0, _time.formatDuration)(realtimeEffects.normalDuration), " "), "using the following routes:", ' ', filteredRoutes.map(function (route, idx) {
        return _react.default.createElement("span", {
          key: idx
        }, _react.default.createElement("b", null, route), filteredRoutes.length - 1 > idx && ', ');
      }), ".") : _react.default.createElement("span", {
        className: "small"
      }, "Your trip results are currently being affected by service delays. These delays do not factor into travel times shown below.")), _react.default.createElement("div", null, _react.default.createElement(_reactBootstrap.Button, {
        block: componentClass === 'popover' // display as block in popover
        ,
        className: "toggle-realtime",
        onClick: toggleRealtime
      }, useRealtime ? "Ignore" : "Apply", " service delays"))));

      if (componentClass === 'popover') {
        return _react.default.createElement(_reactBootstrap.OverlayTrigger, {
          trigger: "click",
          placement: "bottom" // container={this}
          // containerPadding={40}
          ,
          overlay: _react.default.createElement(_reactBootstrap.Popover, {
            style: {
              maxWidth: '300px'
            },
            id: "popover-positioned-bottom"
          }, innerContent)
        }, _react.default.createElement(_reactBootstrap.Button, {
          bsStyle: "link"
        }, _react.default.createElement("i", {
          className: "fa fa-2x fa-exclamation-circle"
        })));
      } else {

/**
 * FIXME: remove this polyfill when react-bootstrap is no longer used
 */
/* eslint-disable import/namespace */

import React, { cloneElement, useContext } from 'react'
import ReactDOM from 'react-dom'
import * as ReactBootstrap from 'react-bootstrap'
import contains from 'dom-helpers/query/contains'
import { WindowEnv } from '../components/etc/window-env'
import { includes } from 'lodash'

ReactBootstrap.OrigOverlayTrigger = ReactBootstrap.OverlayTrigger
ReactBootstrap.OriginModal = ReactBootstrap.Modal

const { OriginModal, Overlay } = ReactBootstrap

function isOneOf(one, of) {
  if (Array.isArray(of)) {
    return of.indexOf(one) >= 0
  }
  return one === of
}

function createChainedFunction(...funcs) {
  return funcs
    .filter(f => f != null)
    .reduce((acc, f) => {
      if (typeof f !== 'function') {

"use strict";

var moment = require('moment');

var React = require('react');

// var Grid = require('react-bootstrap').Grid;
var Col = require('react-bootstrap').Col;
var Row = require('react-bootstrap').Row;
var Modal = require('react-bootstrap').Modal;
var Button = require('react-bootstrap').Button;

var Form = require('react-bootstrap').Form;
var FormControl = require('react-bootstrap').FormControl;
var FormGroup = require('react-bootstrap').FormGroup;
var ControlLabel = require('react-bootstrap').ControlLabel;
var Radio = require('react-bootstrap').Radio;

var Switch = require('react-bootstrap-switch');

var Blink1SerialOption = require('./blink1SerialOption');

var TimeForm = React.createClass({
    propTypes: {
        rule: React.PropTypes.object.isRequired,
        allowMultiBlink1: React.PropTypes.bool,
        patterns: React.PropTypes.array,
        onSave: React.PropTypes.func,
        onCancel: React.PropTypes.func,
        onDelete: React.PropTypes.func,