react-multi-toggle-extra v1.1.0

react-multi-toggle-extra

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

This project was forked from https://github.com/danielarias123/react-multi-toggle and extended. This project will stay in sync with its updates by monitoring it with Backstroke. {:height="40px"}

Installation

Can be installed as an npm package

npm install react-multi-toggle-extra

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: 'Deny',
    selectedDisplayName: 'Denied',
    value: 2
  },
  {
    displayName: 'Accept',
    selectedDisplayName: 'Accepted',
    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

options format

Toggle prop options is any array of objects with keys:

License

MIT