EzDev.org

react-bootstrap

react-bootstrap - Bootstrap 3 components built with React React-Bootstrap


React-Bootstrap add pull-right to Button

I have the following JSX using React-Bootstrap:

<Button bsStyle="danger pull-right" bsSize="small" onClick={() => {alert('do stuff')}}>
    <Glyphicon glyph="trash" />
</Button>

However this will show a warning in the console:

Warning: Failed prop type: Invalid prop `bsStyle` of value `danger pull-right` supplied to `Button`, expected one of ["success","warning","danger","info","default","primary","link"].

What is the best way to add pull-right to the list of styles?

The above code does work, but I'd prefer not to have any warnings in my console.


Source: (StackOverflow)

What do these three dots in React do?

What does the ... do in this React (using JSX) code and what is it called?

<Modal {...this.props} title='Modal heading' animation={false}>

Source: (StackOverflow)

React-Bootstrap link item in a navitem

I'm having some styling issues using react-router and react-bootstrap. below is a snippet of the code

import { Route, RouteHandler, Link } from 'react-router';
import AuthService from '../services/AuthService'
import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap';

    <Nav pullRight>
      <NavItem eventKey={1}>
        <Link to="home">Home</Link>
      </NavItem>
      <NavItem eventKey={2}>
        <Link to="book">Book Inv</Link>
      </NavItem>
      <NavDropdown eventKey={3} title="Authorization" id="basic-nav-dropdown">
        <MenuItem eventKey="3.1">
          <a rel='nofollow' href="" onClick={this.logout}>Logout</a>
        </MenuItem>          
      </NavDropdown>  
    </Nav>

This is what it looks like when it renders.

enter image description here

I know that the <Link></Link> is causing this but I don't know why? I would like for this to be in-line.


Source: (StackOverflow)

Listen to keypress for document in reactjs

I want to bind to close the active react bootstrap popover on escape press .Here is the code

_handleEscKey:function(event){
         console.log(event);
        if(event.keyCode == 27){
          this.state.activePopover.hide();
        }
   },

  componentWillMount:function(){
     BannerDataStore.addChangeListener(this._onchange);
     document.addEventListener("click", this._handleDocumentClick, false);
     document.addEventListener("keyPress", this._handleEscKey, false);
   },


   componentWillUnmount: function() {
     BannerDataStore.removeChangeListener(this._onchange);
      document.removeEventListener("click", this._handleDocumentClick, false);
      document.removeEventListener("keyPress", this._handleEscKey, false);
   },

But nothing is getting logged in the console when I press any key. I have tried to listen that on window also and with different cases .'keypress','keyup' etc but it seem I am doing something wrong .


Source: (StackOverflow)

How to get select element's value in react-bootstrap?

So I'm trying to get a select element's value in reactjs, but just can't figure it out. The this.refs.selectElement.getDOMNode().value is always coming as undefined. All other controls on the form like text are working fine. Any ideas? Is it that you can't get the value of select element via refs and must use onChange event?

Updated:

var TestSelectClass = React.createClass({
  mixins: [Router.Navigation],

  _handleDube: function(event) {
    DubeActionCreators.DubeTest({
      message: this.refs.message.getDOMNode().value,
      tax: this.refs.tax.getDOMNode().value,
      validity: this.refs.valid_for.getDOMNode().value
    });
  },

  render: function() {
    return (
      <ReactBootstrap.ListGroup>
          <textarea
            className="form-control"
            rows="3"
            placeholder="Enter message"
            ref="message" >
          </textarea>
          <div className="input-group">
            <span className="input-group-addon" id="basic-addon1">$</span>
            <input type="text" className="form-control" placeholder="10" aria-describedby="basic-addon1" ref="tax" />
          </div>
        <Input type="select" value="1" ref="valid_for">
          <option value="1">1 hour</option>
          <option value="2">1 day</option>
          <option value="2">5 days</option>
        </Input>
      </ReactBootstrap.ListGroup>
    )
  }
});

Updated: Solution So, if anyone runs into something similar, apparently if you are using react-bootstrap you can't get to the Input element if you have wrapped it in a ListGroup. Either take it out from it or wrap all Input elements in a <form> tag. This solved my issue, thanks for all the help.


Source: (StackOverflow)

react-bootstrap using webpack

I am trying to use react-bootstrap with web pack. I am able to get a bootstrap <Button> on a page, but there is no styles attached? I have installed:

 "devDependencies": {
    "babel-core": "^5.1.11",
    "babel-loader": "^5.0.0",
    "css-loader": "^0.12.1",
    "react-hot-loader": "^1.2.2",
    "react-router": "^0.13.3",
    "webpack": "^1.7.2",
    "webpack-dev-server": "^1.7.0"
  },
  "dependencies": {
    "bootstrap": "^3.3.4",
    "react": "^0.13.0",
    "react-bootstrap": "^0.22.6",
    "whatwg-fetch": "^0.8.1"
  }
}

Loaders in webpack.config.js

  module: {
    loaders: [
      { test: /\.jsx?$/, loaders: ['react-hot', 'babel'], include: path.join(__dirname, 'app') },
      { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.png$/, loader: "url-loader?limit=100000" },
      { test: /\.jpg$/, loader: "file-loader" }
    ]
  }

Source: (StackOverflow)

How to open/close react-bootstrap modal programmatically?

I need to open/close modal like

$(element).modal('show')

How to do that?


Source: (StackOverflow)

Enter key event handler on react-bootstrap Input component

I have an Input component with a button (buttonAfter property), I set an onClick handler associated to the button and so user can type some text and clic the button to fire the right action.

However, I would like user to be able to press [Enter] key (keycode 13) to achieve the same effect as clicking on the button, just to make the UI easier to use.

I could not find a way to do it, of course I tried onKeydown to register an handler for key down event but it is just ignored.


Source: (StackOverflow)

Can not submit form react-bootstrap

I have the following react-bootstrap component:

        <FormGroup onSubmit={this.gotEmail} role="form">
          <FormControl type="text" className="form-control"/>
          <Button className="btn btn-primary btn-large centerButton" type="submit">Send</Button>
        </FormGroup>

I would like the form to be submitted when I click the button "Send".

However, if I click the button, control doesn't reach the this.gotEmail method.

Why is that the case?


Source: (StackOverflow)

Webpack can't load my npm module

I'm in trouble, I just did npm uninstall react-bootstrap and then npm install react-bootstrap and webpack cannot load this module anymore.

I launch webpack like this :

/var/www/cloud/node_modules/.bin/webpack --config webpack.config.js --watch --display-error-details

And here is the error, it just can't find the package.json inside react-bootstrap :

ERROR in ./core/static/core/js/modules/dashboard/admin/Customer.js
Module not found: Error: Cannot resolve module 'react-bootstrap' in /var/www/cloud/core/static/core/js/modules/dashboard/admin
resolve module react-bootstrap in /var/www/cloud/core/static/core/js/modules/dashboard/admin
  looking for modules in /var/www/cloud/node_modules
    resolve 'file' react-bootstrap in /var/www/cloud/node_modules
      resolve file
        /var/www/cloud/node_modules/react-bootstrap is not a file
        /var/www/cloud/node_modules/react-bootstrap.js doesn't exist
        /var/www/cloud/node_modules/react-bootstrap.jsx doesn't exist
    resolve 'file' or 'directory' /var/www/cloud/node_modules/react-bootstrap
      resolve file
        /var/www/cloud/node_modules/react-bootstrap is not a file
        /var/www/cloud/node_modules/react-bootstrap.js doesn't exist
        /var/www/cloud/node_modules/react-bootstrap.jsx doesn't exist
      resolve directory
        use lib/index.js from package.json
          resolve 'file' or 'directory' lib/index.js in /var/www/cloud/node_modules/react-bootstrap
            resolve file
              /var/www/cloud/node_modules/react-bootstrap/lib/index.js doesn't exist
              /var/www/cloud/node_modules/react-bootstrap/lib/index.js.js doesn't exist
              /var/www/cloud/node_modules/react-bootstrap/lib/index.js.jsx doesn't exist
            resolve directory
              /var/www/cloud/node_modules/react-bootstrap/lib/index.js/package.json doesn't exist (directory description file)
              /var/www/cloud/node_modules/react-bootstrap/lib/index.js doesn't exist (directory default file)
        directory default file index
          resolve file index in /var/www/cloud/node_modules/react-bootstrap
            /var/www/cloud/node_modules/react-bootstrap/index doesn't exist
            /var/www/cloud/node_modules/react-bootstrap/index.js doesn't exist
            /var/www/cloud/node_modules/react-bootstrap/index.jsx doesn't exist

That's really odd, my package.json looks like :

{
  "name": "cloud",
  "version": "1.0.0",
  "description": "hehe",
  "main": "gulp.js",
  "scripts": {
    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "license": "",
    "dependencies": {
    "anima": "^0.4.0",
    "immutable": "^3.7.4",
    "imports-loader": "^0.6.4",
    "moment": "^2.10.3",
    "react-bootstrap": "^0.23.7",
    "react-google-recaptcha": "^0.3.2",
    "react-paginate": "^0.1.31",
    "script-loader": "^0.6.1",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "babel": "^5.5.6",
    "babel-core": "^5.5.6",
    "babel-loader": "^5.1.4",
    "css-loader": "^0.15.1",
    "node-libs-browser": "^0.5.2",
    "react-hot-loader": "^1.2.7",
    "style-loader": "^0.12.3",
    "webpack": "^1.9.10",
    "webpack-bundle-tracker": "0.0.51"
  }
}

And my webpack config :

var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker'); 
var bower_dir = __dirname + '/components/bower_components/';
var node_modules_dir = path.resolve(__dirname, 'node_modules');

module.exports = {
    context: __dirname,
    entry: {
        app: [ './core/static/core/js/main.js', ],
              vendor: ['react', 'react-router', 'react-bootstrap', 'react-google-recaptcha', 'react-spinkit'],  
    },    
    output: {
        path: path.resolve('./static/bundles/'),
        filename: 'bundle.js',
        publicPath:''           
    },  
    externals: {
        // require("jquery") is external and available
        //  on the global var jQuery
        "jquery": "jQuery",
        "utils": "utils"
    }, 
    plugins: [new BundleTracker({filename: './webpack-stats.json'}),
              new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js"),   
              /*new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })*/],
              module: {
                  loaders: [{ test: /\.jsx?$/, exclude: node_modules_dir, loaders: ['babel']}, // to transform JSX into JS
                            { test: require.resolve("jquery"), loader: "imports?jQuery=jquery" },
                            { test: /\.json$/, loader: "json" },
                            { test: /\.css$/, loader: "style-loader!css-loader?root=." }],
              },
              resolve: {
                  modulesDirectories: ['node_modules', 'bower_components'],
                  extensions: ['', '.js', '.jsx']
              },
};

Plus, the folder react-bootstrap do exists in my node_modules.

My tree is like this :

webpack.config.js

node_modules

package.json

Im totally lost...


Source: (StackOverflow)

Get file object from file Input

I'm trying to use a react-bootstrap file input with jquery fileupload(). With straight jquery I would do $('#fileUpload').prop('files') to get the files to pass to the fileupload call. However, I don't know how to get the files correctly with react-bootstrap.

<Input type='file' label='Upload' accept='.txt' ref='fileUpload' buttonAfter={uploadFileButton}/>

Source: (StackOverflow)

React-Bootstrap Dropdown with Input won't stay open

I am using React-Bootstrap DropDown with an Input inside a MenuItem (otherwise the console yells at me Uncaught TypeError: Cannot read property 'focus' of undefined)

Okay so the drop down renders, and the input is inside a menu item (all is well) except when I click inside the input, the dropdown closes.

Here is my JSX

<Bootstrap.DropdownButton title={this.state.callIdTitle} id="callId">
  <Bootstrap.MenuItem eventKey='1'>
   <input ref="callIdInput" type='text' eventKey='2' placeholder='Enter Call ID' />
  </Bootstrap.MenuItem>
</Bootstrap.DropdownButton>

Any pointing in the right direction is very much appreciated, I have been trying to solve this all day.

Thank you.


Source: (StackOverflow)

How to get an input value using "refs" in react-bootstrap form?

I'm trying to create a form that appears in modal. So when user input a value, that value is stored in local storage. Here's a picture that help's you to understand what I mean:
enter image description here Here is the code of the form:

function FieldGroup({id, label, help, ...props}) {
    return (
        <ReactBootstrap.FormGroup controlId={id}>
            <ReactBootstrap.ControlLabel>{label}</ReactBootstrap.ControlLabel>
            <ReactBootstrap.FormControl {...props} />
            {help && <ReactBootstrap.HelpBlock>{help}</ReactBootstrap.HelpBlock>}
        </ReactBootstrap.FormGroup>
    );
}

const formInstance = (
    <form>
        <FieldGroup
            id="formControlsText"
            type="text"
            label="Text"
            placeholder="Recipe Name"
            inputRef={ref => { this.input = ref; }}
        />
        <ReactBootstrap.FormGroup controlId="formControlsTextarea">
            <ReactBootstrap.ControlLabel>Ingredients</ReactBootstrap.ControlLabel>
            <ReactBootstrap.FormControl componentClass="textarea" placeholder="Enter Ingredients" />
        </ReactBootstrap.FormGroup>
    </form>
);  

As I've read in bootstrap React tutorial, I should add
<FormControl inputRef={ref => { this.input = ref; }} /> to the FormControl props. But after adding it I get an error when modal form is invoked:

`enter image description here


Source: (StackOverflow)

Set focus on a react-bootstrap.Input field using refs.x.getDOMNode.focus

The JSX:

var Button = require("react-bootstrap").Button;
var Input = require("react-bootstrap").Input;
var MyClass = React.createClass({
        onclick: function () {
           this.refs.email.getDOMNode().focus();
           console.log('DOM element', this.refs.email.getDOMNode());
        }
        render: function () {
          return (
             <div>
                <Button onClick={this.onlick}>Login</Button>
                <Input ref='email' type='email' />
             </div>
            );
        },
    });  

Notes:

  1. The input field is a react-bootstrap.Input class.
  2. The getDOMNode().focus() concept is from Facebook react docs

When the button onclick handler runs, the email input field should be getting the focus, but it's not happening. I found that the react-bootstrap Input field class is rendering the real DOM input field inside a wrapping div. This is the output of the console.log:

<div class="form-group" data-reactid=".1awy8d4e9kw.1.3.$=1$3:0.0.0.1.0">
  <input class="form-control" type="email" data-reactid=".1awy8d4e9kw.1.3.$=1$3:0.0.0.1.0.1:$input">
</div>

So looks like the input isn't getting the focus because the focus is applied on the wrapping div, which rejects it (I use document.activeElement in the console to check).

Question is, how to focus on the real input element?

Note: A bit unrelated but React respects the autoFocus property. That's useful in case the focus is needed to be set immediately after rendering. Still, it's not a substitute for the programmatic way.


Source: (StackOverflow)

How to use react-bootstrap with postcss-module and react-css-module?

Below is my Greeter.jsx file:

import React, {Component} from 'react';
import cssModules from 'react-css-modules';
import {Button} from 'react-bootstrap';
import styles from './Greeter.css';

const option = {
  'allowMultiple': true
};

class Greeter extends Component{
  render() {
    return (
      <div styleName='root root-child'>
        <h1>Welcome to React Devops.</h1>

        <p styleName="para">This is an amazing para.</p>
        <p>Hot module reload.</p>

        <Button bsStyle="primary">Test</Button>
      </div>
    );
  }
}

export default cssModules(Greeter, styles, option);

Below is my main.js file:

import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/css/bootstrap-theme.min.css';

import './main.css';

render(<Greeter />, document.getElementById('root'));

I use postcss-modules and react-css-modules to isolate selectors within components due to which, when the file loads, the class name becomes something like _3lmHzYQ1tO8xPJFY8ewQax.

Example:

<div class="_3lmHzYQ1tO8xPJFY8ewQax _32vj3squi8uWPfEu4ZzyBZ" data-reactid=".0"></div>

Below is how react-bootstrap would give me the output:

<button class="btn btn-primary"></button>

which has not been isolated as I use bsStyle (react-bootstrap) rather than styleName(react-css-modules) and hence I cannot apply the bootstrap css style to the element.

Is there a way through which I can use react-bootstrap by isolating its class to match the output that postcss-modules generate?

Thanks in anticipation.


Source: (StackOverflow)