niftytushar / react-toggle-switch

React Toggle Switch component

react-toggle-switch

React Toggle Switch

Demo: https://trendmicro-frontend.github.io/react-toggle-switch

Installation

1. Install the latest version of react and react-toggle-switch:

npm install --save react @trendmicro/react-toggle-switch

2. At this point you can import @trendmicro/react-toggle-switch and its styles in your application as follows:

import ToggleSwitch from '@trendmicro/react-toggle-switch';

// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-toggle-switch/dist/react-toggle-switch.css';

Usage

Uncontrolled Component

<ToggleSwitch
    checked
    ref={(node) => {
        this.toggleSwitch = node;
    }}
/>

You can get the value of the checked attribute:

console.log(this.toggleSwitch.checked);
// => true

Controlled Component

<ToggleSwitch
    checked={this.state.checked}
    onChange={(event) => {
        this.setState({ checked: !this.state.checked });
    }}
/>

API

Properties

Name	Type	Default	Description
checked	boolean	false
disabled	boolean	false
onChange	function		A callback fired when toggling checked state.
size	One of: 'large' 'lg' 'small' 'sm'	'lg'

License

MIT