JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1299
  • Score
    100M100P100Q103551F
  • License MIT

Multi use toggle component for react

Package Exports

  • react-multi-toggle

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-multi-toggle) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-multi-toggle

React-Multi-Toggle is a stylish 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

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 String 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