react-multi-toggle

Multi use toggle component for react

Usage no npm install needed!

<script type="module">
  import reactMultiToggle from 'https://cdn.skypack.dev/react-multi-toggle';
</script>

README

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

License

MIT