react-radio-lab

React-radio-lab is a react component library for node. It can be used with redux-form and can be readily modified and stylized. You can you the stylize the default circle buttons, or create your own buttons from html.

Table of Contents

• Installation
• Getting Started
• Styling the Radio Buttons
• Creating Unique Custom Buttons
• Use with Redux-Form

Installation

Install using npm:

npm install --save react-radio-lab

Dependencies

You'll need Radium and lodash installed in your app if you don't have them already:

npm install --save radium lodash

Import the RadioLab and RadioButton components to your react file:

import { RadioLab, RadioButton } from 'react-radio-lab';

Getting Started

Wrap the RadioButton child components with the RadioLab component

RadioButton - Each RadioButton should have a unique value (number, string or boolean) by which it can be identified. You can also pass in a label (i.e. 'Button One').

RadioLab - Pass an onChange function as a prop, to handle changes when buttons are selected. The onChange function will receive the value of the RadioButton selected. The init prop indicated which RadioButton should be selected by default, and should be the value of the desired RadioButton.

onChange(value) {
  this.setState({selectedValue: value});
}

render() {
  return (
    <RadioLab onChange={this.onChange} init={"one"}>
      <RadioButton value={"one"}>Button One</RadioButton>
      <RadioButton value={"two"}>Button Two</RadioButton>
    </RadioLab>
  );
}

The default (unstyled) buttons look like this:

RadioLab Props

| prop | type | required | notes | ------------- |---------------| ---------|--------- | onChange | function | yes | callback for when RadioButton is selected; receives the value of the selected RadioButton | init | string, boolean, number | no | init should be the value of the RadioButton to be selected by default. Note, do not pass an init if using with redux-form (see below)

RadioButton Props

| prop | type | required | Notes | ------------- |---------------| ---------|--------- | value | string, boolean, number | yes | the value identifies the RadioButton and should be unique | style | object | no | change the style of the RadioButton, see styling, creating unique buttons, below. | on | function | no | Optional. Used to pass create your own unique ON (selected) button. | off | function | no | Optional. Used to pass create your own unique OFF (not selected) button.

Styling the Radio Buttons

By default, the radio buttons are composed of an inner and outer circle using svg circle elements. You can override the default styles of each RadioButton by passing in an object to the style prop.

The following properties can be modified by the style prop:

innerCircle - changes the styling of the inner circle.

outerCircle - changes the styling of the outer circle.

label - changes the styling of the label

container - modify the div wrapping the label and the svg

  <RadioLab onChange={this.onChange} init={false}>
    <div style={styles.inline}>
      <RadioButton value={true} style={styles.button}>
        <span><i>True</i></span>
      </RadioButton>
    </div>
    <div style={styles.inline}>
      <RadioButton value={false} style={styles.button}>
        <span><i>False></i></span>
      </RadioButton>
    </div>
  </RadioLab>
  ....
  const styles = {
    inline: {
      display: "inline-block",
      margin: '5px',
      padding: '10px',
      border: '2px dashed green',
      width: '100px'
    },
    button: {
      innerCircle: {
        r: 7,
        fill: '#FFC300',
      },
      outerCircle: {
        r: 11,
        stroke: '#FFC300',
      },
      label: {
        color: '#FFC300',
        bottom: 4,
        fontSize: 22
      },
      container: {
        border: '2px dashed #FFC300'
      },
    },
  }

The above code results in the styling shown below.

Below are summaries of the different properties for innerCircle, outerCircle, Note that you may pass in other properties than those listed below.

innerCircle Properties

| Key | Property | Default | Notes | ------------- |---------------| ---------|--------- | r | circle radius | 5 | Inner radius should be less than outer radius, should be a number | fill | fill color | '#888' | | stroke | stroke color | '#888' | | strokeWidth | stroke width | 0 |

outerCircle Properties

| Key | Property | Default | Notes | ------------- |---------------| ---------|--------- | r | circle radius | 8 | Inner radius should be less than outer radius, should be a number | fill | fill color | '#F4F6FA' | | stroke | stroke color | '#888' | | strokeWidth | stroke width | 2.5 |

label Properties

| Key | Property | Default | Notes | ------------- |---------------| ---------|--------- | color | label color | '#5f6062' | | fontSize | font size | 14 | | fontFamily | font | 'arial' | | position | position | 'relative' | | bottom | distance from bottom of container div | 5 | |left | left distance | 5 |

container Properties

| Key | Property | Default | Notes | ------------- |---------------| ---------|--------- | float | float | 'left' | | width | width | '100%' | | height | height | '100%' | | paddingTop | top padding | 10 | | cursor | mouseover pointer | 'pointer' |

Creating Unique Custom Buttons

RadioButton accepts two props, on and off, which can be used to create your own unique buttons. Simply pass in a function returning html tags:

 <RadioLab init={true} onChange={this.onChange.bind(this)}>
    <RadioButton value={true} on={this.on} off={this.off} style={styles.label}>True</RadioButton>
    <RadioButton value={false} on={this.on} off={this.off} style={styles.label}> False</RadioButton>
 </RadioLab>

...

//on and off should be functions like this:
on() {
  return (
    <svg height="15px" width="15px">
        <rect {...rectOuter} />
        <rect {...rectInner} />
    </svg>
  );
 }

off() {
  return (
    <svg height="15px" width="15px">
        <rect {...rectOuter} />
    </svg>
);

//style the inner rect
const rectInner = {
  fill: "orange",
  x: '3.5',
  y: '3.5',
  height: '8',
  width: '8',
}

//style the outer rect
const rectOuter = {
  x: '0',
  y: '0',
  height: '15',
  width: '15',
  stroke: '#888',
  strokeWidth: 4,
  fill: 'none'
}

The above code results in this:

Or pass in a react component:

const CustomButton = ({ label, styles }) => {
  return (
    <div style={styles.div}>
      <span style={styles.span}>{label}</span>
    </div>
  );
}
...

//function returning ON button
on() {
    return (
      <CustomButton label="ON" styles={{div: styles.on, span: styles.span }}/>
    );
};

//function returning OFF button
off() {
    return (
      <CustomButton label="ON" styles={{div: styles.off, span: styles.span }}/>
    );
};

//styling
const styles = {
  on: {
    border: '2px solid blue',
    background: 'orange',
    height: '30px',
    width: '50px',
    textAlign: 'center'
  },

  off: {
    border: '2px solid blue',
    height: '30px',
    width: '50px',
    textAlign: 'center'
  },


  span: {
    display: 'inline-block',
    paddingTop: '5px'
  },
}

...
<RadioLab init={true} onChange={this.onChange.bind(this)}>
  <RadioButton value={true} on={this.on} off={this.off}></RadioButton>
  <RadioButton value={false} on={this.on} off={this.off}></RadioButton>
</RadioLab>

Which results in:

Use with Redux-Form

Add a functional component prop to the Field component in redux-form. This function should accept the props passed down by Field and pass it on to RadioLab. Note that no onChange or init props is necessary for RadioLab (though you will have to initialize the value using redux-form.

<Field
  name="RadioButtonsField"
  component={(props) => {
    return (
      <div style={{maxWidth: '90em'}}>
        <RadioLab {...props} >
          <Row>
            <Col xs={6}>
                <RadioButton value={false}>
                  <span>False</span>
                </RadioButton>
            </Col>
            <Col xs={6}>
              <RadioButton value={true}>
                <span>True</span>
              </RadioButton>
            </Col>
          </Row>
        </RadioLab>
      </div>
    );
  }}
/>