react-toggle-component/srcdocs/upgrade.mdx

A React UI Component to display an awesome Toggle Button control

---
name: Upgrade Guide
route: /upgrade
---

# 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

```jsx
// 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`

```jsx
// 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).

```jsx
// 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](/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](/theming) section for more details.