🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

react-toggle-switch

Package Overview
Dependencies
Maintainers
1
Versions
29
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-toggle-switch

Simple iOS inspired toggle switch

3.0.4
latest
Source
npm
Version published
Weekly downloads
3.1K
6.63%
Maintainers
1
Weekly downloads
 
Created
Source

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}>
              <i 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

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

Import Styling

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

Keywords

react

FAQs

Package last updated on 11 Dec 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