@material/react-switch v0.15.0

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

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