# tswitch

> tSwitch library - iOS alternative for radio switch button.

Latest version **1.1.22** (published 2018-02-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install tswitch
pnpm add tswitch
yarn add tswitch
bun add tswitch
```

## 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.22 |
| Published | 2018-02-21 |
| First published | 2017-02-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 134.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Łukasz Wróblewski |
| Maintainers | armata007, lwroblewski |

## Links

- npm: https://www.npmjs.com/package/tswitch
- Repository: https://github.com/lwrooblewski/tSwitch
- Homepage: https://github.com/lwrooblewski/tSwitch#readme
- Issues: https://github.com/lwrooblewski/tSwitch/issues
- npm.io page: https://npm.io/package/tswitch

## Recent versions

- 1.1.22 (latest) — 2018-02-21
- 1.1.20 — 2018-02-21
- 1.1.18 — 2018-02-21
- 1.1.15 — 2017-03-21
- 1.1.14 — 2017-03-21
- 1.1.13 — 2017-03-21
- 1.1.11 — 2017-02-03
- 1.1.10 — 2017-02-03
- 1.1.9 — 2017-02-03
- 1.1.8 — 2017-02-03
- 1.1.7 — 2017-02-03
- 1.1.6 — 2017-02-03
- 1.1.5 — 2017-02-03
- 1.1.4 — 2017-02-03
- 1.1.2 — 2017-02-02
- … 6 more at https://npm.io/package/tswitch/versions

## README

# tSwitch
tSwitch - iOS switch alternative for web development. No third-party needed.

Lightweight plugin for replacing standard checkbox with iOS-like design switch. All you need to do is just import module and create simple object with properties. And what is most improtant - works without jQuery.

# Short example:
````javascript
import 'tswitch/dist/styles.css';
import tSwitch from 'tswitch'

const swch = new tswitch({
  element: document.getElementById('example-switch'),
  onActivate: () => {
        console.log('onActivate');
    },
  onDeactivate: () => {
      console.log('onDeactivate');
  },
  onToggle: (checked) => {
      if (checked){
          console.log('On toggle checked');
      } else {
          console.log('On toggle unchecked');
      }
    }
});
````

tSwitch replace checkbox input with custom component from now.

# Options

`element` - selected HTMLElement object  
`additionalClass [string]` - optional parameter which adds string to a tSwitch class list  
`size [string | default 'medium' | 'x-small' | 'small' | 'medium' | 'large' ]` - sets class with associated scale transform  
`isActive [boolean | default false]` - sets start active state  
`isDisabled [boolean | default false]` - sets start disabled state   
`background [string | default #FFF]` - sets background color  
`backgroundActive [string | default #5D9CEC]` - sets active state background color  
`didMountCallback [boolean]` - triggers callback onActivate or onDeactivate depends on earlier passed isActive option when tSwitch is created  
`onActivate [function]` - callback when switch is being active  
`onDeactivate [function]` - callback when switch is being deactivated  
`onToggle [function]` - callback when switch state is being toggled  

# Methods
`getIsActive() [boolean]` - return boolean depends on switch state
`setActive(newStatus, preventCallback) [boolean]` - changes switch state depends on newStatus and execute or not onActivate or onDeactivate callback


# Feedback
Feel free to open issues or contribute. Contact me at <a href="mailto:l.wrooblewski@gmail.com">l.wrooblewski@gmail.com</a> or my <a href="https://pl.linkedin.com/in/wroblewskilukasz">LinkedIn profile</a>.

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