0.1.1 • Published 5 years ago
mi-toggle-switch v0.1.1
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.