https://github.com/clari/react-ios-switch

React switch component https://clari.github.io/react-ios-switch
https://github.com/clari/react-ios-switch

Last synced: 3 months ago
JSON representation

React switch component https://clari.github.io/react-ios-switch

• Host: GitHub
• URL: https://github.com/clari/react-ios-switch
• Owner: clari
• License: mit
• Archived: true
• Created: 2015-12-10T20:43:27.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2023-01-24T22:47:09.000Z (almost 2 years ago)
• Last Synced: 2024-10-15T11:34:00.988Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 450 KB
• Stars: 128
• Watchers: 31
• Forks: 26
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components-all - react-ios-switch - React switch component. (Uncategorized / Uncategorized)
• awesome-react-components - react-ios-switch - React switch component. (UI Components / Form Components)
• awesome-react - react-ios-switch - React switch component.  (UI Components / Form Components)
• awesome-list - react-ios-switch - React switch component. (Demos / Form Components)
• awesome-react-components - react-ios-switch - React switch component. (UI Components / Form Components)
• awesome-react-components - react-ios-switch - React switch component. (UI Components / Form Components)
• awesome-react-components - react-ios-switch - React switch component. (UI Components / Form Components)
• fucking-awesome-react-components - react-ios-switch - React switch component. (UI Components / Form Components)
• awesome-react-components - react-ios-switch - React switch component. (UI Components / Form Components)
• awesome-react-components - react-ios-switch - React switch component. (UI Components / Form Components)

README

        
react-ios-switch

===



[Demo](https://clari.github.io/react-ios-switch)

[CodePen](https://codepen.io/mking-clari/pen/dzKxdb)

Features

---

- Drag or click to toggle

- Works with labels 

Usage

---

```javascript

import Switch from 'react-ios-switch';

// Simple usage

 {}}

/>

// All props (defaults shown)

 {}}

  onColor="rgb(76, 217, 100)"

  pendingOffColor={undefined}

  pendingOnColor={undefined}

  readOnly={undefined}

  style={undefined}

/>

```

Development

---

```

# Install packages

yarn

# Start server

yarn start

# Visit http://localhost:8080

```

Inspirations

---

- [Switchery](https://abpetkov.github.io/switchery)

- [Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/visual-design/color)