# react-toggle-switch

> Simple iOS inspired toggle switch

Latest version **3.0.4** (published 2017-12-11) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-toggle-switch
pnpm add react-toggle-switch
yarn add react-toggle-switch
bun add react-toggle-switch
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.0.4 |
| Published | 2017-12-11 |
| First published | 2015-07-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Patrick Grimard |
| Maintainers | pgrimard |
| Keywords | react, toggle, switch, ios |

## Links

- npm: https://www.npmjs.com/package/react-toggle-switch
- Repository: https://github.com/pgrimard/react-toggle-switch
- Homepage: https://github.com/pgrimard/react-toggle-switch#readme
- Issues: https://github.com/pgrimard/react-toggle-switch/issues
- npm.io page: https://npm.io/package/react-toggle-switch

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.4 (latest) — 2017-12-11
- 3.0.3 — 2017-09-22
- 3.0.2 — 2017-09-22
- 3.0.1 — 2017-09-22
- 3.0.0 — 2017-09-13
- 2.1.4 — 2017-05-26
- 2.1.3 — 2017-01-24
- 2.1.2 — 2016-05-16
- 2.1.1 — 2016-05-16
- 2.1.0 — 2016-05-16
- 2.0.1 — 2016-05-16
- 2.0.0 — 2016-04-28
- 1.1.2 — 2016-04-15
- 1.1.1 — 2016-04-14
- 1.1.0 — 2016-02-19
- … 14 more at https://npm.io/package/react-toggle-switch/versions

## README

# react-toggle-switch
A simple iOS inspired toggle switch.

<img src="https://github.com/pgrimard/react-toggle-switch/raw/master/switch.png" width="50" height="26" alt="Switch" title="Switch"/>

## Install

```
npm install --save react-toggle-switch
```

## Demo

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

## Usage

```javascript
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](https://github.com/pgrimard/react-toggle-switch/pull/18).

### 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`.
3. `className` - Optional CSS classes for the root element.

### Import Styling

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

---
_Source: https://npm.io/package/react-toggle-switch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._