React-multi-toggle NPM

react-multi-toggle

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

alt text

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.