boundless-radio

    1.1.0 • Public • Published

    Radio

    Radio 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 onSelected that a controller view must intercept and apply against the data provider.

    Installation

    npm i boundless-radio --save

    Then use it like:

    /** @jsx createElement */
     
    import { createElement, PureComponent } from 'react';
    import Radio from 'boundless-radio';
     
    export default class RadioDemo extends PureComponent {
        state = {
            options: [ {
                labelContent: 'Business',
                name: 'major',
                selected: false,
                value: 'bus',
            }, {
                labelContent: 'Engineering',
                name: 'major',
                selected: true,
                value: 'eng',
            }, {
                labelContent: 'Physical Sciences',
                name: 'major',
                selected: false,
                value: 'phys-sci',
            }, {
                labelContent: 'Psychology',
                name: 'major',
                selected: false,
                value: 'psy',
            }, {
                labelContent: 'Law',
                name: 'major',
                selected: false,
                value: 'law',
            } ],
        }
     
        handleInteraction(code) {
            // eslint-disable-next-line no-alert
            alert(`${code} selected!\n\nThe input will now revert to its previous state because this demo does not persist model changes.`);
        }
     
        render() {
            return (
                <div>
                    <p>What is your academic major?</p>
                    <div className='spread'>
                        {this.state.options.map((definition) => {
                            let boundFunc = this.handleInteraction.bind(this, definition.value);
     
                            return (
                                <Radio {...definition}
                                         key={definition.value}
                                         labelContent={definition.labelContent}
                                         onSelected={boundFunc} />
                            );
                        })}
                    </div>
                </div>
            );
        }
    }

    Radio 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 { Radio } from 'boundless';

    Props

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

    Required Props

    • name · passthrough to the HTML name attribute on the .b-radio node

      Expects Default Value
      string ''
    • value · passthrough to the HTML value attribute on the .b-radio node

      Expects Default Value
      string ''

    Optional Props

    • * · any React-supported attribute

      Expects Default Value
      any n/a
    • component · override the wrapper component HTML element tag if desired

      Expects Default Value
      string 'div'
    • inputProps

      Expects Default Value
      object {}
    • labelContent · any React-renderable content

      Expects Default Value
      any renderable or arrayOf(any renderable) null
    • labelProps

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

      Expects Default Value
      function () => {}
    • selected · determines the activation state of the radio control, see React "controlled inputs")

      Expects Default Value
      bool false

    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-radio/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-radio

    DownloadsWeekly Downloads

    1

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • sighrobot