Itsa-react-multicheckbox NPM

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:

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").
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