@trendmicro/react-toggle-switch

Trend Micro Components: React Toggle Switch

Usage no npm install needed!

<script type="module">
  import trendmicroReactToggleSwitch from 'https://cdn.skypack.dev/@trendmicro/react-toggle-switch';
</script>

README

react-toggle-switch build status Coverage Status

NPM

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
  1. 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