# awesome-react-toggles

> React component which renders a toggle switch.

Latest version **2.0.0** (published 2023-10-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install awesome-react-toggles
pnpm add awesome-react-toggles
yarn add awesome-react-toggles
bun add awesome-react-toggles
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2023-10-20 |
| First published | 2023-10-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 129.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Md Zaid Siddiqui |
| Maintainers | zaidsidd360 |
| Keywords | toggle, toggle switch, toggle button, switch, react toggle, react switch |

## Links

- npm: https://www.npmjs.com/package/awesome-react-toggles
- Repository: awesome-react-toggles
- npm.io page: https://npm.io/package/awesome-react-toggles

## Recent versions

- 2.0.0 (latest) — 2023-10-20
- 1.0.0 — 2023-10-17
- 0.0.8 — 2023-10-17
- 0.0.7 — 2023-10-17
- 0.0.6 — 2023-10-17
- 0.0.5 — 2023-10-17
- 0.0.4 — 2023-10-17
- 0.0.3 — 2023-10-17
- 0.0.2 — 2023-10-17
- 0.0.1 — 2023-10-17

## README

<h1 align="center">Awesome React Toggles</h1>

<p align="center">🚀⚛ A collection of react components to render cool toggle switches 🔘✅ </p>

<p align="center">
  <a href="#features">Features</a> •
  <a href="#installation">Installation</a> •
  <a href="#usage">Usage</a> •
  <a href="#props">Props</a> •
  <a href="#report-a-bug">Report a bug</a>
</p>

## Features
- Customizable styles and toggle duration. ✅
- Support onToggle callback. 🔄
- In-built multiple toggle switch variants. (in-progress) 🚀

## Installation
```
npm install awesome-react-toggles
```
OR
```
yarn add awesome-react-toggles
```

## Usage
```jsx
import { ToggleDefault } from "awesome-react-toggles";

const App = (props: any): JSX.Element => {

    const handleToggle = () => {
      console.log("Toggle works!")
    }

    return (
      <ToggleDefault
        size={5}
        width={4}
        onToggle={handleToggle}
      />
    );
}
```

## Props
| name | description | type | default |
|---|---|---|---|
| `size` | Overall size of the entire toggle component. | number | 3.2 |
| `width` | Width of the toggle component. | number | 2 |
| `onToggle` | Callback funtion for when the switch is toggled on or off. | () => void | undefined |
| `isToggled` | Sets the switch's toggled state on or off based on the given value. | boolean | undefined |
| `buttonShadow` | Button's box shadow. | string (must be a valid CSS box-shadow value) | "rgba(0, 0, 0, 0.35) 0px 5px 15px" |
| `backgroundShadow` | Background's box shadow. | string (must be a valid CSS box-shadow value) | "rgba(50, 50, 93, 0.25) 0px 15px 30px -15px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset" |
| `outlineOnFocus` | Whether the toggle component is outlined when focused or not. | boolean | true |
| `outlineColor` | Color of the outline. | string (must be a valid CSS color value) | "gray" |
| `outlineWidth` | Width of the outline. | string (must be a number followed by a valid CSS unit) | "1px" |
| `transitionDuration` | Duration of the transition of the switch from off to on and vice versa. | string (must be a number followed by a valid CSS unit) | "200ms" |
| `bgColorChecked` | Background color when the switch is toggled on | string (must be a valid CSS color value) | "#4cda64" |
| `bgColorUnchecked` | Background color when the switch is toggled off | string (must be a valid CSS color value) | "#dbdbdb" |

## Report a bug
If you found a bug in this library, please file a GitHub issue [here](https://github.com/zaidsidd360/awesome-react-toggles/issues).

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