# @busshi/react-switch

> A custom iOS switch component for React

Latest version **1.0.6** (published 2023-02-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @busshi/react-switch
pnpm add @busshi/react-switch
yarn add @busshi/react-switch
bun add @busshi/react-switch
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2023-02-20 |
| First published | 2023-02-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 8.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | busshi |
| Keywords | React, Switch, iOS Switch |

## Links

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

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0

## 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.0.6 (latest) — 2023-02-20
- 1.0.5 — 2023-02-20
- 1.0.4 — 2023-02-19
- 1.0.3 — 2023-02-19
- 1.0.2 — 2023-02-19
- 1.0.1 — 2023-02-19
- 1.0.0 — 2023-02-19

## README

![publish](https://github.com/busshi/npm-react-switch/actions/workflows/publish-npm.yml/badge.svg)

# React-Switch

A custom React switch component reusable without extra dependency (only React dependencies).

## Installation

`yarn add @busshi/react-switch` or `npm install @busshi/react-switch`

## Custom properties

| Props                  | Type     | Default value | Required / Optional |
| :--------------------- | :------- | :------------ | :------------------ |
| checked                | boolean  |               | required            |
| onChange               | function |               | required            |
| width                  | string   | 40px          | optional            |
| height                 | string   | 20px          | optional            |
| borderRadius           | string   | 20px          | optional            |
| backgroundColor        | string   | #ddd          | optional            |
| thumbSize              | string   | 20px          | optional            |
| thumbColor             | string   | white         | optional            |
| checkedBackgroundColor | string   | #306FDB       | optional            |

## Note

Colors can be passed as prop as hex (#FFF), rgb (rgb(255, 255, 255)) or as noun (white).

## Usage

```js
import Switch from "@busshi/react-switch";
import { useState } from "react";

function App() {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <div>
      <Switch
        checked={isChecked}
        onChange={() => {
          setIsChecked(!isChecked);
        }}
        width="40px"
        height="20px"
        borderRadius="20px"
        backgroundColor="#ddd"
        thumbSize="20px"
        thumbColor="white"
        checkedBackgroundColor="#306FDB"
      />
    </div>
  );
}

export default App;
```

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