Mi-Toggle-Switch

Mi-Toggle-Switch is a React component library build with styled-components. It will help you create a Toggle Switch component very fast and extremely easy in ReactJS.

Installation

You can use either npm

npm i mi-toggle-switch

or yarn

yarn add mi-toggle-switch

Basic Usage

import React from 'react';
import { MiToggleSwitch } from 'mi-toggle-switch';

class App extends React.Component {
  render() {
    return (
      <MiToggleSwitch />
    );
  }
}

export default App;

PropTypes and defaultProps

Prop | Type | Default | Description ------------ | ------------ | ------------ | ------------ isEnable | boolean | false | If true, the switch is set to checked. If false, it is not checked. type | oneOf(['rectangular', 'rounded']) | 'rounded' | If 'rectangular' => create Rectangular Toggle Switch. If 'rounded' => create Rounded Toggle Switch activeColor | string | '#62c28e' | Set color when it is checked deactiveColor | string | '#cccccc' | Set color when it is not checked width | number | 32*1.625 | Set width of the Toggle Switch height | number | 32 | Set height of the Toggle Switch ballColor | string | '#ffffff' | Set ball background color spacing | number | 2 | Set space between ball and Toggle Switch container onClick | Function | undefined | Callback when click Toggle Switch onStateChanged | Function | undefined | Callback when change state Toggle Switch isStateChange | boolean | true | Enable and disable change state Toggle Switch when click it.

License

Mi-Toggle-Switch is MIT licensed.