Wondering what’s next for npm?Check out our public roadmap! »

    This package has been deprecated

    Author message:

    This package is no longer maintained. Please try something like react-switch instead.

    react-toggle-switch

    3.0.4 • Public • Published

    react-toggle-switch

    A simple iOS inspired toggle switch.

    Switch

    Install

    npm install --save react-toggle-switch
    

    Demo

    https://patrickgrimard.io/react-toggle-switch/

    Usage

    import React, {Component} from 'react';
    import {render} from 'react-dom';
    import Switch from 'react-toggle-switch'
     
    class MyComponent extends Component {
      constructor(props) {
        super(props);
        this.state = {
          switched: false
        };
      }
     
      toggleSwitch = () => {
        this.setState(prevState => {
          return {
            switched: !prevState.switched
          };
        });
      };
     
      render() {
        return (
            <div>
                {/* Basic Switch */}
                <Switch onClick={this.toggleSwitch} on={this.state.switched}/>
     
                {/* With children */}
                <Switch onClick={this.toggleSwitch} on={this.state.switched}>
                  <class="some-icon"/>
                </Switch>
     
                {/* Disabled */}
                <Switch onClick={this.toggleSwitch} on={this.state.switched} enabled={false}/>
     
                {/* Custom classnames */}
                <Switch onClick={this.toggleSwitch} on={this.state.switched} className='other-class'/>
            </div>
        );
      }
     
    }
     
    export default MyComponent;

    Upgrading to version 3.0.0

    Please take note that as of version 3.0.0, a Switch no longer maintains an internal state. Using this component requires that you pass both an onClick method and an on value to set the current state of the Switch. More details about why this was changed can be found here.

    Props

    1. onClick - Function handler to be called any time the switch is clicked.
    2. on - Sets the switch on or off.
    3. enabled - If set to false, the switch cannot be toggled. Default is true.
    4. className - Optional CSS classes for the root element.

    Import Styling

    @import "node_modules/react-toggle-switch/dist/css/switch.min.css" 

    Install

    npm i react-toggle-switch

    DownloadsWeekly Downloads

    17,127

    Version

    3.0.4

    License

    MIT

    Last publish

    Collaborators

    • avatar