# react-js-switch

> Switch is a visual toggle between two mutually exclusive states — on and off.

Latest version **1.1.6** (published 2021-11-20) · ISC license · 0 weekly downloads

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

## Install

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

## Health

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

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2021-11-20 |
| First published | 2021-10-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 17.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Ahmed Alabsi |
| Maintainers | alabsi91 |
| Keywords | react, reactjs, switch, toggle |

## Links

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

## Dependencies (1)

- [request-animation-number](https://npm.io/package/request-animation-number.md) ^1.0.6

## 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

- 1.1.6 (latest) — 2021-11-20
- 1.1.5 — 2021-11-02
- 1.1.4 — 2021-11-02
- 1.0.4 — 2021-11-02
- 1.0.3 — 2021-10-27
- 1.0.2 — 2021-10-07
- 1.0.1 — 2021-10-05
- 1.0.0 — 2021-10-03

## README

# react-js-switch

- Switch is a visual toggle between two mutually exclusive states — on and off.

![](https://github.com/alabsi91/react-js-switch/blob/readme/react-switches.png)

## Installation

`npm install react-js-switch`

## Usage

```jsx
//...

import Switch from 'react-js-switch';

export default function App() {
  const [isSwitchOn, setIsSwitchOn] = useState(true);

  const switch_onChange_handle = () => {
    setIsSwitchOn(!isSwitchOn);
    //...
  };

  return (
    <div>
      //...
      <Switch value={isSwitchOn} onChange={switch_onChange_handle} />
      //...
    </div>
  );
}
```

## Props

### value : _[Boolean] [optional]_

- Value of the switch, `true` means 'on', `false` means 'off'.
### initialValue : _[Boolean] [optional]_

- Value of the switch on the first render, true means 'on', false means 'off'.
- **Note:** this prop will be overwritten by the `value` prop.

### size : _[Number] [optional]_

- The size of the switch in pixels.
- **Default Value** `40`

### duration : _[Number] [optional]_

- Switch On/Off animation duration in ms.
- **Default Value** `250`

### ease : _[String] [optional]_

- Switch On/Off animation timing function.
- Check [easings.net](https://easings.net/) to learn more.
- **Default Value** `easeOutExpo`
- If you want to provide your own timing-function make sure that the function takes one parameter and returns one value.

```javascript
function easeInQuad(x) {
  return x * x;
}
```

### color : _[String] [optional]_

- Custom color for switch circle button.
- **Default Value** `#fff`

### backgroundColor : _[String] [optional]_

- Switch container background color when it's on or off.
- **Default Value** `{ on: '#fc3f7f', off: '#f9f9f9' }`

### borderColor : _[String] [optional]_

- Switch container border color when it's on or off.
- **Default Value** `{ on: '#fc3f7f', off: '#e6e6e6' }`

### disabled : _[Boolean] [optional]_

- Disable toggling the switch.
- **Default Value** `false`

### onChange : _[ (state: Boolean) => void ] [optional]_

- Callback called with the new value when it changes.
- Takes a parameter represents switch state, this parameter will return `null` if the switch `value` linked to a state.

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