# react-switcher-rc

> React switcher component

Latest version **1.1.13** (published 2020-04-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-switcher-rc
pnpm add react-switcher-rc
yarn add react-switcher-rc
bun add react-switcher-rc
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.13 |
| Published | 2020-04-19 |
| First published | 2020-04-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 9.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | qubaish |
| Maintainers | qubaish |
| Keywords | switch, toggle, toggle-button, toggle-switch, checkbox, react, react-component |

## Links

- npm: https://www.npmjs.com/package/react-switcher-rc
- Repository: https://github.com/Qubaish/react-switcher-component
- Homepage: https://github.com/Qubaish/react-switcher-component#readme
- Issues: https://github.com/Qubaish/react-switcher-component/issues
- npm.io page: https://npm.io/package/react-switcher-rc

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^16.13.1
- [react-dom](https://npm.io/package/react-dom.md) 16.12.0
- [classnames](https://npm.io/package/classnames.md) 2.2.6
- [prop-types](https://npm.io/package/prop-types.md) 15.7.2

## 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.13 (latest) — 2020-04-19
- 1.1.12 — 2020-04-19
- 1.1.1 — 2020-04-19
- 1.1.0 — 2020-04-18
- 1.0.10 — 2020-04-18
- 1.0.9 — 2020-04-18
- 1.0.8 — 2020-04-18
- 1.0.7 — 2020-04-17
- 1.0.6 — 2020-04-17
- 1.0.5 — 2020-04-17

## README

# Swticher Component For React
<br/>

![npm](https://img.shields.io/npm/v/react-switcher-rc)
![npm](https://img.shields.io/npm/dm/react-switcher-rc)
[![Build Status](https://travis-ci.com/Qubaish/react-switcher-component.svg?branch=master)](https://travis-ci.com/Qubaish/react-switcher-component)
[![Netlify Status](https://api.netlify.com/api/v1/badges/748368e6-84ed-4b1e-87d0-3cc828826b28/deploy-status)](https://app.netlify.com/sites/vibrant-neumann-bebf47/deploys)
[![gzip size](http://img.badgesize.io/https://unpkg.com/react-switcher-rc/lib/index.js?compression=gzip)](https://unpkg.com/react-switcher-rc/lib/index.js)

# Demo
<a href="https://codesandbox.io/s/react-switcher-bpgpz">Switcher Component</a>

# Features
- **Draggable** with the mouse or with a touch screen.
- **Customizable** - Easy to customize size, color and more.
* Very light weight
* You can overide css properties

## Installation

```bash
npm install react-switcher-rc
```

## Usage

```javascript
import React, {useState} from 'react';
import Switcher from 'react-switcher-rc';

function SwitcherExample() {
    const [switcherState, setSwitcherState] = useState(false);
    const onHandleChange = e => {
        setSwitcherState(e.target.checked);
    }
    return (
        <div>
            <Switcher 
                name="my-switcher"
                onChange={onHandleChange}
                checked={switcherState}
            />
        </div>
    )
}
```

| Props         | Type          | Description  |
| ------------- |:-------------:| :-----:       |
| checked       | boolean       | Required. If true, the switch is set to checked. If false, it is not checked.|
| onChange     | func      |   Required. Invoked when the user clicks or drags the switch. It passed event|
| disabled | boolean      |    Disabled the component |
| onColor | String      |    Can be hash or color `#000` or `red` |


## Development

You're welcome to contribute to react-switch. Keep in mind that big changes have to be thoroughly tested on lots of different browsers and devices before they can be merged.

To set up the project:

1.  Fork and clone the repository
2.  `$ npm install`
3.  `$ npm run start`

# To Do

* Convert it to styled components
* Test Cases
* Prelint configurations

## Contributors

<table>
  <tbody>
    <tr>
      <td align="center">
        <img src="https://avatars3.githubusercontent.com/u/8197706?s=460&u=127cd5b1b7ac60b23c448c23338194a64ead761d&v=4" width="120">
        <br />
        <a href="https://github.com/Qubaish">Qubaish<a/>
      </td>
    </tr>
  </tbody>
</table>

## License

MIT

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