Skip to content
master
Switch branches/tags
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
 
 
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react-bootstrap-multiselect

NPM version Dependency Status devDependency Status

Description

A multiselect component for react (with bootstrap). This is a react wrapper around an existing jQuery/bootstrap library (it is not a pure react port):

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)

var React = require('react');
var Multiselect = require('react-bootstrap-multiselect');
var someReactComponent = React.createClass({
    render: function () {
        return (
            <Multiselect />
        );
    }
});
  1. 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)
<link rel="stylesheet" href="bootstrap-multiselect.css" type="text/css" />

Supported React Versions

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.

var React = require('react');
var Multiselect = require('react-bootstrap-multiselect');

var someReactComponent = React.createClass({
    getInitialState: function(){
        var that = this;
        $("element").on("event", function(){
            $.get("new-data-from-url", function(newData){
                that.setState(newData);

                // to sync manually do
                that.refs.myRef.syncData();
            });
        });

        return {
            myData : [{value:'One',selected:true},{value:'Two'}]
        };
    },
    render: function () {
        return (
            <Multiselect onChange={this.handleChange} ref="myRef" data={this.state.myData} multiple />
        );
    }
});

Documentation

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

Links

Similar React Components

License

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

About

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

Resources

License

Packages

No packages published