react-bootstrap-multiselect

Description

A multiselect component for react (with bootstrap). This is a react port of:

bootstrap-multiselect

Getting Started

1. Install the module with: npm install --save react-bootstrap-multiselect

2. Create your module (you need to use something like browserify to build)

varReact=require('react');varMultiselect=require('react-bootstrap-multiselect');varsomeReactComponent=React.createClass({render: function(){return(<Multiselect/>);}});

3. Include the multi-select CSS in your project somewhere. The CSS file is here: bootstrap-multiselect.css (don't hotlink- download and host your own copy)

<linkrel="stylesheet" href="bootstrap-multiselect.css" type="text/css" />

Note on data synchronization

In case this.state.myData changes from outside of multiselect component, values and checkbox state will not update automatically. If you want to sync state, you have to call .syncData() on multiselect like in example below.

varReact=require('react');varMultiselect=require('react-bootstrap-multiselect');varsomeReactComponent=React.createClass({getInitialState: function(){varthat=this;$("element").on("event",function(){$.get("new-data-from-url",function(newData){that.setState(newData);// to sync manually dothat.refs.myRef.syncData();});});return{myData : [{value:'One',selected:true},{value:'Two'}]};},render: function(){return(<MultiselectonChange={this.handleChange}ref="myRef"data={this.state.myData}multiple/>);}});

Documentation

For in depth documentation, see the original bootstrap-multiselect project page.

Links

• Source Code
• Live Demo
• Original Plugin

License

Copyright (c) 2014 skratchdot
Uses the original bootstrap-multiselect license.