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