Necessarily Precedes Mischief

    boundless-checkbox

    1.1.0 • Public • Published

    Checkbox

    Checkbox is implemented as a "controlled input", meaning it is a direct representation of the model data passed inside. User interaction will bubble changes in the form of onChecked and onUnchecked that a controller view must intercept and apply against the data provider.

    Installation

    npm i boundless-checkbox --save

    Then use it like:

    /** @jsx createElement */
     
    import { createElement, PureComponent } from 'react';
    import Checkbox from 'boundless-checkbox';
     
    export default class CheckboxDemo extends PureComponent {
        state = {
            checkboxes: [ {
                checked: false,
                indeterminate: false,
                label: 'An unchecked checkbox',
                name: 'box1',
            }, {
                checked: true,
                indeterminate: false,
                label: 'A checked checkbox',
                name: 'box2',
            }, {
                checked: false,
                indeterminate: true,
                label: 'An indeterminate (mixed) checkbox',
                name: 'box3',
            } ],
        }
     
        handleInteraction(event) {
            // eslint-disable-next-line no-alert
            alert(`${event.target.name} ${event.target.checked ? 'checked' : 'unchecked'}!\n\nThe input will now revert to its previous state because this demo does not persist model changes.`);
        }
     
        render() {
            return (
                <div className='spread'>
                    {this.state.checkboxes.map((definition) => {
                        return (
                            <Checkbox
                                key={definition.name}
                                inputProps={definition}
                                label={definition.label}
                                onChange={this.handleInteraction} />
                        );
                    })}
                </div>
            );
        }
    }

    Checkbox can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:

    npm i boundless --save

    the ES6 import statement then becomes like:

    import { Checkbox } from 'boundless';

    Props

    Note: only top-level props are in the README, for the full list check out the website.

    Required Props

    There are no required props.

    Optional Props

    • * · any React-supported attribute

      Expects Default Value
      any n/a
    • component · any valid HTML tag name

      Expects Default Value
      string 'div'
    • inputProps · all input-specific props like value, name, etc should be passed here -- common ones are listed below

      Expects Default Value
      object { checked: false, indeterminate: false }
    • label · any React-renderable content, most commonly a simple string

      Expects Default Value
      any renderable null
    • labelProps

      Expects Default Value
      object {}
    • onChecked · called when the element becomes checked; backing data must be updated to persist the state change

      Expects Default Value
      function () => {}
    • onUnchecked · called when the element becomes unchecked; backing data must be updated to persist the state change

      Expects Default Value
      function () => {}

    Reference Styles

    Stylus

    You can see what variables are available to override in variables.styl.

    // Redefine any variables as desired, e.g:
    color-accent = royalblue
     
    // Bring in the component styles; they will be autoconfigured based on the above
    @require "node_modules/boundless-checkbox/style"

    CSS

    If desired, a precompiled plain CSS stylesheet is available for customization at /build/style.css, based on Boundless's default variables.

    Install

    npm i boundless-checkbox

    DownloadsWeekly Downloads

    2

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • sighrobot