Socket
Socket
Sign inDemoInstall

@material/react-switch

Package Overview
Dependencies
3
Maintainers
13
Versions
15
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@material/react-switch

Material Components React Switch


Version published
Maintainers
13
Install size
1.81 MB
Created

Readme

Source

React Switch

A React version of an MDC Switch.

Installation

npm install @material/react-switch

Usage

Styles

with Sass:

import '@material/react-switch/index.scss';

with CSS:

import "@material/react-switch/dist/switch.css";

Javascript Instantiation

import React from 'react';
import Switch from '@material/react-switch';

class MyApp extends React.Component {
  state = {checked: false};

  render() {
    return (
      <React.Fragment>
        <Switch
          nativeControlId='my-switch'
          checked={this.state.checked}
          onChange={(e) => this.setState({checked: e.target.checked})} />
        <label htmlFor='my-switch'>My Switch</label>
      </React.Fragment>
    );
  }
}

NOTE: In order to get access to the checked value, you must add an onChange handler that accepts an Event and updates a checked state as shown above.

Props

Prop NameTypeDescription
classNameStringClasses to be applied to the switch element
checkedBooleanIndicates whether the switch is checked ("on")
disabledBooleanIndicates whether the switch is disabled
nativeControlIdStringId attached to the native control for relationship with the label

Sass Mixins

Sass mixins may be available to customize various aspects of the Components. Please refer to the MDC Web repository for more information on what mixins are available, and how to use them.

Advanced Sass Mixins

Keywords

FAQs

Last updated on 22 Jul 2019

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

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc