swipe-toggle-switch

ReactJs swipe toggle switch component

Usage no npm install needed!

<script type="module">
  import swipeToggleSwitch from 'https://cdn.skypack.dev/swipe-toggle-switch';
</script>

README

swipe-toggle-switch

This is small and simple toggle switch component for reactjs framework.

NOTE: this library is distributed ONLY as commonjs module. It does not export component in global namespace and never will!

Animated

Install and use

npm install swipe-toggle-switch

than in your react component:

import SwipeToggleSwitch from './../build/swipe-toggle-switch.js';

and in the render method of your component

  <SwipeToggleSwitch value={ this.state.lightIsOn } caption='Light' 
    offStateText='Off' onStateText='On' onToggle={this.onSwitchToggle}/>

Properties

  • value - initial value (Boolean)
  • caption - text on a switch lever (String)
  • offStateText - text do display when state is off (String)
  • onStateText - text do display when state is on (String)

Methods

  • onToggle - handler to be called every time, user toggle a switch. It has 2 parameters: event and newValue

Run example

NOTE: To run an example localy you need to have a webpack.

  1. git clone https://github.com/AndrewKovalenko/swipe-toggle-switch.git
  2. cd swipe-toggle-switch
  3. npm i
  4. webpack
  5. webpack --config ./build.example.js
  6. Open ./example/index.html in your browser