react-multi-toggle

React-Multi-Toggle is a stylish & lightweight toggle component that extends the functionality of a checkbox or a radio button

Installation

Can be installed as an npm package

npm install react-multi-toggle

Development

Example can be found here.

npm i
npm start

Runs example on the webpack dev server on http://localhost:8080/ with Hot Module Reloading enabled.

Usage

Example using es6 syntax

import React, { Component } from `react`;
import MultiToggle from `react-multi-toggle`;

const groupOptions = [
  {
    displayName: 'Couple',
    value: 2
  },
  {
    displayName: 'Family',
    value: 4
  },
];

class Example extends Component {
  constructor(props) {
    super(props);

    this.state = {
      groupSize: 2
    };
  }

  onGroupSizeSelect = value => this.setState({ groupSize: value });

  render = () => {
    const { groupSize } = this.state;

    return (
      <MultiToggle
        options={groupOptions}
        selectedOption={groupSize}
        onSelectOption={this.onGroupSizeSelect}
        label="Select Group Size"
      />
    );
  }


}

module.exports = Example;

Include the component's CSS through style-loader using require("../style.css") or by adding styles to your existing stylesheets.

Props

| Name | Type | Required | Description | |:---|:---|:---|:---| | options | Array<Object> | Yes | Ordered array of options to render. Explained further below. | | selectedOption | Any | Yes | Currently selected value. | | onSelectOption | Function | No | Callback when option is selected. Receives the selected option value as parameter | | label | Any | No | Optional label to add above toggle. | | className | string | No | Optional style class to apply to toggle component. |

options format

Toggle prop options is any array of objects with keys:

| Key | Type | Required | Description | |:---|:---|:---|:---| | value | Any | Yes | Value passed by prop onSelectOption. | | displayName | String or React Element | No | Label rendered on toggle for each option. If omitted, value will be used. | | optionClass | String | No | Optional class to apply to toggle when option is selected. |

License

MIT