You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

react-multi-toggle

Package Overview
Dependencies
621
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-multi-toggle

Multi use toggle component for react


Version published
Maintainers
1
Created

Readme

Source

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

NameTypeRequiredDescription
optionsArray<Object>YesOrdered array of options to render. Explained further below.
selectedOptionAnyYesCurrently selected value.
onSelectOptionFunctionNoCallback when option is selected. Receives the selected option value as parameter
labelAnyNoOptional label to add above toggle.
classNamestringNoOptional style class to apply to toggle component.

options format

Toggle prop options is any array of objects with keys:

KeyTypeRequiredDescription
valueAnyYesValue passed by prop onSelectOption.
displayNameString or React ElementNoLabel rendered on toggle for each option. If omitted, value will be used.
optionClassStringNoOptional class to apply to toggle when option is selected.

License

MIT

Keywords

FAQs

Package last updated on 13 Nov 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc