tjwebb / react-bootstrap-select

A custom select for react-bootstrap using button dropdown

react-bootstrap-select

A custom select / multiselect for Bootstrap using button dropdown, designed to behave like regular Bootstrap selects. Tested with React 0.12 and Bootstrap 3. Based on https://github.com/silviomoreto/bootstrap-select

1. Install

$ npm install react-bootstrap-select --save

2. Usage

React = require('react');
React.Bootstrap = require('react-bootstrap');
React.Bootstrap.Select = require('react-bootstrap-select');

<React.Bootstrap.Select>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</React.Bootstrap.Select>

3. Demo and Documentation

See a Bootstrap 3 example here.

License

MIT

Checkout the documentation for further information.

react-bootstrap-select's Issues

how to import react-bootstrap-select, not require

docs say "require", like:

React = require('react');
React.Bootstrap = require('react-bootstrap');
React.Bootstrap.Select = require('react-bootstrap-select');

how can I import it in fluxible web app, I use this but failed:

npm install react-bootstrap-select react-bootstrap --save

import React from 'react';
import { jQuery } from 'jquery';
import { Bootstrap } from 'react-bootstrap';
import Select from 'react-bootstrap-select';

class Demo extends React.Component {
    render() {
         return (
        <Select>
           <option>Mustard</option>
           <option>Ketchup</option>
           <option>Barbecue</option>
        </Select>
        );
    }
}

npm run dev show error:

> node index_dev

/home/ubuntu/code/web-app/node_modules/react-bootstrap-select/js/bootstrap-select.js:1373
})(jQuery);
   ^

ReferenceError: jQuery is not defined
    at Object.<anonymous> (/home/ubuntu/code/web-app/node_modules/react-bootstrap-select/js/bootstrap-select.js:1373:4)
    at Module._compile (module.js:397:26)
    at Module._extensions..js (module.js:404:10)
    at Object.require.extensions.(anonymous function) [as .js] (/home/ubuntu/code/web-app/node_modules/babel-register/lib/node.js:134:7)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/home/ubuntu/code/web-app/node_modules/react-bootstrap-select/dist/Select.js:4:1)
    at Module._compile (module.js:397:26)

then I install jquery, then it show the same error.

npm install jquery --save

please update react version

npm install react-bootstrap-select --save
npm WARN peerDependencies The peer dependency react@^0.12.2 included from react-bootstrap-select will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency react-bootstrap@^0.16 included from react-bootstrap-select will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
\
> [email protected] postinstall /Users/me/Documents/Sources/client/node_modules/react-bootstrap-select
> jsx jsx/ dist/

built Module("Select")
["Select"]
npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/bin/iojs" "/usr/local/bin/npm" "install" "react-bootstrap-select" "--save"
npm ERR! node v4.0.0
npm ERR! npm  v2.14.2
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@>=0.13
npm ERR! peerinvalid Peer [email protected] wants react@~0.13.x || ~0.12.x
npm ERR! peerinvalid Peer [email protected] wants react@^0.12.2

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/me/Documents/Sources/client/npm-debug.log

onChange callback never get called when selected value changed

Maybe I'm missing something? This is how I use it:

             <React.Bootstrap.Select data-style="btn-success" ref="operator" value={this.props.selectedOperator} onChange={this.handleOperatorSelect.bind(this)}>
                {map(this.props.operatorOptions, (label, value) => (
                  <option key={value} value={value}>{label}</option>
                ))}
              </React.Bootstrap.Select>

Uncaught TypeError: React.__spread is not a function

I'm seeing this error in ./dist/Select.js:57
Uncaught TypeError: React.__spread is not a function

  render: function () {
    return (
      React.createElement(Input, React.__spread({},  this.props, {type: "select"}))
    );
  }

I'm using React v15. Any ideas?

Error: React is not defined

Hi all;

Trying to use this project, but getting this:

React is not defined

Any reason that Select.jsx cannot have a simple

var React = require('react');

My build process is browserify with babelify. This could have something to do with it.

Npm install of react-bootstrap-select fails

npm install fails with message:

[email protected] postinstall /Users/bpmadmin/dev/alchemy/update-service-gui/redblack-ui/node_modules/react-bootstrap-select
jsx jsx/ dist/

could not open file: jsx/, Error: EISDIR, illegal operation on a directory

npm ERR! Darwin 14.3.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "--save" "react-bootstrap-select"
npm ERR! node v0.12.2
npm ERR! npm v2.7.4
npm ERR! code ELIFECYCLE

npm ERR! [email protected] postinstall: jsx jsx/ dist/
npm ERR! Exit status 65
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'jsx jsx/ dist/'.
npm ERR! This is most likely a problem with the react-bootstrap-select package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! jsx jsx/ dist/
npm ERR! You can get their info via:
npm ERR! npm owner ls react-bootstrap-select
npm ERR! There is likely additional logging output above.

Seen this issue on both Mac OS X (10.10.3) and Windows 7

Cannot Deploy to Meteor Galaxy: Failed at the [email protected] postinstall script 'jsx jsx/ dist/'.

I am deploying a Meteor app to Galaxy and it is failing at:
Failed at the [email protected] postinstall script 'jsx jsx/ dist/'.

2016-12-19 16:35:07-06:00npm ERR! Failed at the [email protected] postinstall script 'jsx jsx/ dist/'.
v005
2016-12-19 16:35:07-06:00npm ERR! Make sure you have the latest version of node.js and npm installed.
v005
2016-12-19 16:35:07-06:00npm ERR! If you do, this is most likely a problem with the react-bootstrap-select package,
v005
2016-12-19 16:35:07-06:00npm ERR! not with npm itself.
v005
2016-12-19 16:35:07-06:00npm ERR! Tell the author that this fails on your system:
v005
2016-12-19 16:35:07-06:00npm ERR! jsx jsx/ dist/
v005
2016-12-19 16:35:07-06:00npm ERR! You can get information on how to open an issue for this project with:
v005
2016-12-19 16:35:07-06:00npm ERR! npm bugs react-bootstrap-select
v005
2016-12-19 16:35:07-06:00npm ERR! Or if that isn't available, you can get their info via:
v005
2016-12-19 16:35:07-06:00npm ERR! npm owner ls react-bootstrap-select
v005
2016-12-19 16:35:07-06:00npm ERR! There is likely additional logging output above.
v005
2016-12-19 16:35:07-06:00
v005
2016-12-19 16:35:07-06:00npm ERR! Please include the following file with any support request:
v005
2016-12-19 16:35:07-06:00npm ERR! /app/bundle/programs/server/npm/npm-debug.log
v005
2016-12-19 16:35:07-06:00
v005
2016-12-19 16:35:07-06:00npm WARN [email protected] No description
v005
2016-12-19 16:35:07-06:00npm WARN [email protected] No repository field.
v005
2016-12-19 16:35:07-06:00npm WARN [email protected] No license field.
v005
2016-12-19 16:35:07-06:00npm ERR! Linux 4.4.0-45-generic
v005
2016-12-19 16:35:07-06:00npm ERR! argv "/node-v4.6.2-linux-x64/bin/node" "/node-v4.6.2-linux-x64/bin/npm" "install"
v005
2016-12-19 16:35:07-06:00npm ERR! node v4.6.2
v005
2016-12-19 16:35:07-06:00npm ERR! npm v4.0.5
v005
2016-12-19 16:35:07-06:00npm ERR! code ELIFECYCLE
v005
2016-12-19 16:35:07-06:00npm ERR! [email protected] install: node npm-rebuild.js
v005
2016-12-19 16:35:07-06:00npm ERR! Exit status 1
v005
2016-12-19 16:35:07-06:00npm ERR!
v005
2016-12-19 16:35:07-06:00npm ERR! Failed at the [email protected] install script 'node npm-rebuild.js'.
v005
2016-12-19 16:35:07-06:00npm ERR! Make sure you have the latest version of node.js and npm installed.
v005
2016-12-19 16:35:07-06:00npm ERR! If you do, this is most likely a problem with the meteor-dev-bundle package,
v005
2016-12-19 16:35:07-06:00npm ERR! not with npm itself.
v005
2016-12-19 16:35:07-06:00npm ERR! Tell the author that this fails on your system:
v005
2016-12-19 16:35:07-06:00npm ERR! node npm-rebuild.js
v005
2016-12-19 16:35:07-06:00npm ERR! You can get information on how to open an issue for this project with:
v005
2016-12-19 16:35:07-06:00npm ERR! npm bugs meteor-dev-bundle
v005
2016-12-19 16:35:07-06:00npm ERR! Or if that isn't available, you can get their info via:
v005
2016-12-19 16:35:07-06:00npm ERR! npm owner ls meteor-dev-bundle
v005
2016-12-19 16:35:07-06:00npm ERR! There is likely additional logging output above.
v005
2016-12-19 16:35:07-06:00
v005
2016-12-19 16:35:07-06:00npm ERR! Please include the following file with any support request:
v005
2016-12-19 16:35:07-06:00npm ERR! /app/bundle/programs/server/npm-debug.log
v005
2016-12-19 16:35:10-06:00Removing intermediate container 614194424cc4
v005
2016-12-19 16:35:10-06:00Failed to build version 5. Maximum retries reached.

typescript types

Need typescript type definitions

$ npm install --save-dev @types/react-bootstrap-select
npm ERR! 404  '@types/react-bootstrap-select' is not in the npm registry.

How to fix Uncaught TypeError: React.__spread is not a function

You are using jsx-loader which uses deprecated react-tools. Replace it with babel-loader. Then configure Babel to use es2015 and react presets and you should be good.

Register to Bower

Any reason this isn't registered on bower.io?

Website is down

This requires jquery

This requires jQuery. Which is kind of anti-react.

none of the events are not working

I want to get selected values onChange event

About npm version

Hi, I'm going to host this lib on cdnjs.

I found that your npm didn't update the latest version.
Because we prefer to use npm auto-update to update it.
Would you update it?
Thanks!.
cdnjs/cdnjs#9062

react-bootstrap-select

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Check the render method of BootstrapSelect.

I get an error above when i am using https://www.npmjs.com/package/react-bootstrap-select . How to resolve this ?
This is my snap code:
`import { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import jQuery from 'jquery'
global.jQuery = jQuery
global.jquery = jQuery
global.$ = jQuery
var React = require('react');
require('react-bootstrap');

var Select = require('react-bootstrap-select')

class App extends Component {
render() {
return (

Mustard Ketchup Barbecue

);
}
}`

Lot of Warnings with latest react-bootstrap release

here is the code:

<FormGroup className="form-col-text-field">
                                                <Row>
                                                      <Col lg={3}className="form-col-label-right">
                                                            <ControlLabel>Language</ControlLabel>
                                                      </Col>
                                                      <Col lg={9} className="form-col-text-field">
                                                            <BootstrapSelect id="language" className="form-col-select" onChange={this.handleChange.bind(this)} >
                                                                  <optgroup>
                                                                        {languages.map(lang =>(lang.sortTop==true?
                                                                              <option key={lang.langCode} value={lang.langCode}>{lang.language}</option>
                                                                              :null)
                                                                        )};
                                                                  </optgroup>
                                                                  <optgroup>
                                                                        {languages.map(lang =>(lang.sortTop==false||lang.sortTop==undefined?
                                                                              <option key={lang.langCode} value={lang.langCode}>{lang.language}</option>
                                                                              :null)
                                                                        )};
                                                                  </optgroup>
                                                            </BootstrapSelect>
                                                      </Col>
                                                </Row>
                                          </FormGroup>

and this is how the react looks like

I'm also wondering where these ok signs come from:

Is it possible to use this library with ES6 modules?

React is already imported via import. As are members of react-bootstrap. But when I try to extend those (React.Bootstrap and React.Bootstrap.Select) everything blows us.

Newer Version of React or publish gruntfile?

Hello!

As you may know since React v15, createClass has been deprecated. I would love to help out and update the react dependencies so that we can use it with newer version of React.

Could you please publish the Gruntfile, so we can verify our fixes?

Options remain open while clicking other selects

I'm not sure why it happened in my project - the dropdown behaviour has been logical and straightforward and peachy and all - until I did the following:

• click the select (button)
• the list of options will be shown
• click another select
• the list of this select's options will be shown BUT the previous list will not be closed

I ended up with 6 opened dropdowns until I picked an option or clicked somewhere else.

Found out you just need to comment out the e.stopPropagation() in the button click handler:

    button.click(function (e) {
      e.stopPropagation();
      self.setState({ open: !self.state.open });
    });

which will close all potential opened dropdowns before opening the clicked one.

Apologies for my clumsy explanation. I hope you get what I mean :)

The documentation and example page are not working (anymore)

I've tried implementing your react-bootstrap-select package, but was unable to do so.
Was looking for some more examples and documentation, but the link in the readme is dead.