React Button Checkbox
Display your input checkbox and radio like buttons.
Two components that can make a group of buttons behave like a set of checkboxes, radio buttons, or a hybrid where radio buttons can be unchecked.
Like ui.bootstrap.buttons as a React Component.
Live example
http://iam4x.github.io/react-btn-checkbox/
Setup
You can import the lib with as AMD modules, CommonJS modules as a global JS script.
CommonJS / AMD
$ npm install react-btn-checkbox
var ReactBtn = require('react-btn-checkbox');
var Checkbox = ReactBtn.Checkbox;
var Radio = ReactBtn.Radio;
// or
var Checkbox = require('react-btn-checkbox').Checkbox;
var Radio = require('react-btn-checkbox').Radio;
// or with ES6
import {Checkbox, Radio} from 'react-btn-checkbox';</code></pre>
Browser globals
The package contains two files dist/react-btn-checkbox.min.js
and dist/react-btn-checkbox.js
with all components exported in the window.ReactBtn
object.
<script src='dist/react-btn-checkbox.min.js'></script>
<script type='text/jsx'>
var Checkbox = ReactBtn.Checkbox;
var Radio = ReactBtn.Radio;
var component = React.createClass({...});
React.render(...);
</script>
Styles
Don't forget to include stylsheets from dist/react-btn-checkbox.css
or dist/react-btn-checkbox.min.css
.
<link rel='stylesheet' href='dist/react-btn-checkbox.min.css'>
Usage
Checkbox
import {Checkbox} from 'react-btn-checkbox';
export default React.createClass({
getInitialState() {
return {
'First': false,
'Second': true,
'Third': false
}
},
render() {
return (
<Checkbox
label='Checkbox'
options={this.state}
onChange={this.setState.bind(this)} />
);
}
});
Radio
import {Radio} from 'react-btn-checkbox';
export default React.createClass({
getInitialState() {
return {
'First': false,
'Second': true,
'Third': false
}
},
render() {
return (
<Radio
label='Radio'
options={this.state}
onChange={this.setState.bind(this)} />
);
}
});
With bootstrap
You can apply button group bootstrap styles if they are included, and remove default styles from react-btn-checkbox
.
<Checkbox
label='Checkbox with bootstrap'
options={...}
onChange={...}
bootstrap />
Development
Installation
- Install dependancies:
$ npm install
- Dev:
$ gulp serve && open http://localhost:3000
- Build:
$ gulp build
Contribute
Follow CONTRIBUTE.md