React Toggle
Edit page
Code of conduct
Components
Get Started Theming Upgrade Guide
Upgrade to 2.0 from 1.x Labels Events Mode prop Theme prop

# Upgrade Guide

##
Upgrade to 2.0 from 1.x

This version is not fully compatible with the previous 1.x versions. Anyway, you may update your code easly

## Labels

First of all, we've removed the props for the labels. You can upgrade your code by following

    // previous v1.x<Toggle label="Left label" />// Left label from v2.x<label htmlFor="toggle-a">  Click me  <Toggle name="toggle-a" /></label>// Right label from v2.x<label htmlFor="toggle-b">  <Toggle name="toggle-b" />  Click me</label>

## Events

The previous
`onChange` event become `onToggle`

    // previous v1.x<Toggle name="toggle-c" onChange={(checked, evt) => console.log(e.target.checked)} />// from v2.x<Toggle name="toggle-c" onToggle={e => console.log(e.target.checked)} />

The new `onToggle` event, has got only one param, I mean, the standard `event` object. In fact, you will be able to get all information about the toggle by using `e.target` as shown above.

In addition, you may use the new `onRight` and `onLeft` events. They are trigged when the toggle is switched from the left to the right and vice versa. In short, when it's
on (usually) and off (usually).

    // from left to the right "on"<Toggle name="toggle-c" onRight={e => console.log(e.target.name)} />// from right to the left "off"<Toggle name="toggle-c" onLeft={e => console.log(e.target.name)} />

## Mode prop

Also the prop `mode` is no longer available. This because in the previous version the `mode="switch"` was keeping the "on" and "off" appearance colours the same. Now, you can do the same by using the new props. See the
Theming section for more details.

## Theme prop

We have also removed the `theme` prop. Now, you'll be able to create any toggle theme by using the new props for the appearance and the theme provider. See the Theming section for more details.