skywickenden / react-bootstrap-multiselect Goto Github PK

View Code? Open in Web Editor NEW

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

License: Other

JavaScript 100.00%

react-bootstrap-multiselect's Introduction

react-bootstrap-multiselect

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

Install the module with: npm install --save react-bootstrap-multiselect
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 />
        );
    }
});

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

React 13 users should use react-bootstrap-multiselect v0.6.0
React 14 users should use react-bootstrap-multiselect v1.0.2
React 15 users should use react-bootstrap-multiselect v2.x.x

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 />
        );
    }
});