itsa-react-multicheckbox

Beautiful multiple iOS-stylisch checkboxes for react.

Lightweight, focussable and responses to the spacebar.

To quickly render a list of selectable options.

How to use:

"use strict";
 
const React = require("react"),
    ReactDOM = require("react-dom"),
    Component = require("itsa-react-multicheckbox");
 
const handleChange = newChecked => {
    props.checked = newChecked;
    renderMultiCheckboxComponent();
};
 
let props = {
    autoFocus: true,
    options: [
        "Januari",
        "Februari",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    checked: 3,
    onChange: handleChange
};
 
const renderMultiCheckboxComponent = () => {
    ReactDOM.render(
        <Component {...props} />,
        document.getElementById("component-container")
    );
};
 
renderMultiCheckboxComponent();

About the css

You need the right css in order to make use of itsa-react-multicheckbox. There are 2 options:

1. You can use the css-files inside the css-folder. You also will need to use the css from itsa-react-option: require("itsa-react-option/css/component.scss").
2. You can use: Component = require("itsa-react-multicheckbox/lib/component-styled.jsx"); and build your project with webpack. This is needed, because you need the right plugin to handle a requirement of the scss-file.

View live example

API

If you want to express your appreciation

Feel free to donate to one of these addresses; my thanks will be great :)

• Ether: 0xE096EBC2D19eaE7dA8745AA5D71d4830Ef3DF963
• Bitcoin: 37GgB6MrvuxyqkQnGjwxcn7vkcdont1Vmg