react-toggle-component
Version:
A React UI Component to display an awesome Toggle Button control
2 lines • 43.2 kB
HTML
<html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style data-href="/react-toggle/styles.2543ff947a193d7f33b1.css">@import url(https://fonts.googleapis.com/css?family=Inconsolata&display=swap);@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap);</style><meta name="generator" content="Gatsby 2.17.13"/><title data-rh="true">Upgrade Guide | React Toggle</title><meta data-rh="true" name="description" content="React Toggle documentation and playground"/><meta data-rh="true" property="og:title" content="Upgrade Guide"/><meta data-rh="true" property="og:description" content="React Toggle documentation and playground"/><meta data-rh="true" property="og:type" content="website"/><meta data-rh="true" name="twitter:card" content="summary"/><meta data-rh="true" name="twitter:title" content="Upgrade Guide"/><meta data-rh="true" name="twitter:description" content="React Toggle documentation and playground"/><link as="script" rel="preload" href="/react-toggle/webpack-runtime-950e38aff32dfc4babdc.js"/><link as="script" rel="preload" href="/react-toggle/styles-41a9f6aa338c835e034b.js"/><link as="script" rel="preload" href="/react-toggle/app-d0a47dca2b5d1b408c83.js"/><link as="script" rel="preload" href="/react-toggle/commons-f5facf3ce4d6402c14af.js"/><link as="script" rel="preload" href="/react-toggle/component---srcdocs-upgrade-mdx-c6eadf8f582d6cf92114.js"/><link as="fetch" rel="preload" href="/react-toggle/page-data/upgrade/page-data.json" crossorigin="anonymous"/></head><body><noscript id="gatsby-noscript">This app works best with JavaScript enabled.</noscript><div id="___gatsby"><div style="outline:none" tabindex="-1" role="group" id="gatsby-focus-wrapper"><style data-emotion-css="1ouyflx">.css-1ouyflx{font-family:'Source Sans Pro',sans-serif;font-size:20px;font-weight:400;line-height:1.5;color:var(--theme-ui-colors-text,#2D3747);background-color:var(--theme-ui-colors-background,#FFFFFF);}</style><div class="css-1ouyflx"><style data-emotion-css="jrjj6h">.css-jrjj6h > div{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;}</style><style data-emotion-css="1ubpee3">.css-1ubpee3{min-height:100vh;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-1ubpee3 > div{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;}</style><style data-emotion-css="hbri28">.css-hbri28{box-sizing:border-box;min-width:0;min-height:100vh;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-hbri28 > div{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;}</style><div data-testid="layout" class="css-hbri28"><style data-emotion-css="1xva7m0">body{margin:0;padding:0;}.icon-link{display:none;}.with-overlay{overflow:hidden;}</style><style data-emotion-css="zf0iqh">.css-zf0iqh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}</style><style data-emotion-css="1tjxv7i">.css-1tjxv7i{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}</style><style data-emotion-css="238csb">.css-238csb{box-sizing:border-box;min-width:0;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}</style><main class="css-238csb"><style data-emotion-css="18wmtq">.css-18wmtq{background-color:var(--theme-ui-colors-header-bg,#F5F6F7);position:relative;z-index:1;border-bottom:1px solid var(--theme-ui-colors-border,#CED4DE);}</style><div data-testid="header" class="css-18wmtq"><style data-emotion-css="zankq9">.css-zankq9{display:none;position:absolute;top:calc(100% + 15px);left:30px;}@media screen and (max-width:57.5em){.css-zankq9{display:block;}}</style><style data-emotion-css="1s0wdqz">.css-1s0wdqz{box-sizing:border-box;min-width:0;display:none;position:absolute;top:calc(100% + 15px);left:30px;}@media screen and (max-width:57.5em){.css-1s0wdqz{display:block;}}</style><div class="css-1s0wdqz"><style data-emotion-css="4019lz">.css-4019lz{padding:0;outline:none;background:transparent;border:none;color:var(--theme-ui-colors-header-text,#2D3747);opacity:0.5;cursor:pointer;}.css-4019lz:hover{cursor:pointer;}</style><button class="css-4019lz"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button></div><style data-emotion-css="z6jak6">.css-z6jak6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding-left:32px;padding-right:32px;position:relative;height:80px;}</style><div class="css-z6jak6"><style data-emotion-css="xenp3v">.css-xenp3v{-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;font-size:24px;}</style><style data-emotion-css="1abzlu">.css-1abzlu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;font-size:24px;}</style><style data-emotion-css="ug0363">.css-ug0363{box-sizing:border-box;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;font-size:24px;}</style><div data-testid="logo" class="css-ug0363"><style data-emotion-css="gyijir">.css-gyijir{font-weight:600;color:var(--theme-ui-colors-header-text,#2D3747);-webkit-text-decoration:none;text-decoration:none;}.css-gyijir:hover{color:var(--theme-ui-colors-primary,#0B5FFF);}</style><a class="css-gyijir" href="/react-toggle/">React Toggle</a></div><style data-emotion-css="k008qs">.css-k008qs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><style data-emotion-css="80zs6q">.css-80zs6q{box-sizing:border-box;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><div class="css-80zs6q"><style data-emotion-css="12z0wuy">.css-12z0wuy{margin-right:8px;}</style><style data-emotion-css="q6cf68">.css-q6cf68{box-sizing:border-box;min-width:0;margin-right:8px;}</style><div class="css-q6cf68"><style data-emotion-css="1is33jg">.css-1is33jg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;outline:none;padding:12px;border:none;border-radius:9999px;background-color:var(--theme-ui-colors-header-button-bg,#0B5FFF);color:var(--theme-ui-colors-header-button-color,#FFFFFF);font-size:12px;font-weight:600;cursor:pointer;}</style><a href="https://github.com/gfazioli/react-toggle" target="_blank" rel="noopener noreferrer" class="css-1is33jg"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a></div><button class="css-1is33jg"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></button></div><style data-emotion-css="1gncnz1">.css-1gncnz1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:absolute;bottom:-40px;right:30px;background-color:transparent;color:var(--theme-ui-colors-muted,#67788a);font-size:14px;-webkit-text-decoration:none;text-decoration:none;border-radius:4px;}</style><a href="https://github.com/gfazioli/react-toggle/edit/master/srcdocs/upgrade.mdx" target="_blank" rel="noopener noreferrer" class="css-1gncnz1"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg><style data-emotion-css="1iuj5ih">.css-1iuj5ih{padding-left:8px;}</style><style data-emotion-css="1x2jprh">.css-1x2jprh{box-sizing:border-box;min-width:0;padding-left:8px;}</style><div class="css-1x2jprh">Edit page</div></a></div></div><style data-emotion-css="8s6gy6">.css-8s6gy6{padding-top:0;padding-bottom:0;-webkit-flex:1;-ms-flex:1;flex:1;display:grid;grid-template-columns:250px 1fr;}@media screen and (max-width:57.5em){.css-8s6gy6{display:block;}}</style><div class="css-8s6gy6"><style data-emotion-css="1tn7q1x">.css-1tn7q1x{z-index:999;position:fixed;top:81px;right:0;bottom:0;left:0;background:rgba(0,0,0,0.6);-webkit-transition:all .2s ease-out;transition:all .2s ease-out;visibility:hidden;opacity:0;}</style><style data-emotion-css="h4snl3">.css-h4snl3{box-sizing:border-box;min-width:0;z-index:999;position:fixed;top:81px;right:0;bottom:0;left:0;background:rgba(0,0,0,0.6);-webkit-transition:all .2s ease-out;transition:all .2s ease-out;visibility:hidden;opacity:0;}</style><div class="css-h4snl3"></div><style data-emotion-css="1ethd5x">.css-1ethd5x{padding-top:32px;padding-bottom:32px;padding-left:32px;padding-right:32px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:-webkit-sticky;position:sticky;top:0;z-index:1;min-width:0;max-height:100vh;border-right:1px solid var(--theme-ui-colors-border,#CED4DE);overflow:auto;-webkit-overflow-scrolling:touch;background-color:var(--theme-ui-colors-sidebar-bg,#FFFFFF);}@media screen and (max-width:57.5em){.css-1ethd5x{z-index:9999;display:block;position:fixed;top:81px;left:0;bottom:0;width:256px;padding-left:32px;padding-right:32px;background-color:var(--theme-ui-colors-background,#FFFFFF);-webkit-transition:-webkit-transform .2s ease-out;-webkit-transition:transform .2s ease-out;transition:transform .2s ease-out;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}}</style><style data-emotion-css="1li9yso">.css-1li9yso{box-sizing:border-box;min-width:0;padding-top:32px;padding-bottom:32px;padding-left:32px;padding-right:32px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:-webkit-sticky;position:sticky;top:0;z-index:1;min-width:0;max-height:100vh;border-right:1px solid var(--theme-ui-colors-border,#CED4DE);overflow:auto;-webkit-overflow-scrolling:touch;background-color:var(--theme-ui-colors-sidebar-bg,#FFFFFF);}@media screen and (max-width:57.5em){.css-1li9yso{z-index:9999;display:block;position:fixed;top:81px;left:0;bottom:0;width:256px;padding-left:32px;padding-right:32px;background-color:var(--theme-ui-colors-background,#FFFFFF);-webkit-transition:-webkit-transform .2s ease-out;-webkit-transition:transform .2s ease-out;transition:transform .2s ease-out;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}}</style><div data-testid="sidebar" class="css-1li9yso"><style data-emotion-css="111boms">.css-111boms{margin-bottom:16px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div data-testid="nav-search" class="css-111boms"><style data-emotion-css="1mo6uhh">.css-1mo6uhh{color:var(--theme-ui-colors-border,#CED4DE);margin-right:8px;}</style><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="css-1mo6uhh"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg><style data-emotion-css="1bbueiu">.css-1bbueiu{outline:none;background:none;border:none;color:var(--theme-ui-colors-text,#2D3747);font-size:14px;}</style><input placeholder="Type to search..." value="" class="css-1bbueiu"/></div><style data-emotion-css="1rqvyud">.css-1rqvyud{margin-top:8px;margin-bottom:8px;display:block;color:var(--theme-ui-colors-sidebar-navGroup,#2D3747);-webkit-text-decoration:none;text-decoration:none;font-size:16px;}.css-1rqvyud.active{color:var(--theme-ui-colors-sidebar-navLinkActive,#0B5FFF);}</style><a class="css-1rqvyud" href="/react-toggle/code-of-conduct">Code of conduct</a><style data-emotion-css="1ebprri">.css-1ebprri{margin-top:16px;margin-bottom:16px;}</style><div data-testid="nav-group" class="css-1ebprri"><style data-emotion-css="1c8kbwa">.css-1c8kbwa{margin-bottom:4px;font-size:16px;font-weight:500;color:var(--theme-ui-colors-sidebar-navGroup,#2D3747);cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1c8kbwa">Components<style data-emotion-css="cu2sly">.css-cu2sly{margin-left:4px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-align-self:baseline;-ms-flex-item-align:baseline;align-self:baseline;-webkit-transform:rotateX(0deg);-ms-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:-webkit-transform .3s ease-in-out;-webkit-transition:transform .3s ease-in-out;transition:transform .3s ease-in-out;}</style><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="css-cu2sly"><polyline points="6 9 12 15 18 9"></polyline></svg></div><style data-emotion-css="1isemmb">.css-1isemmb{margin-left:8px;}</style><div data-testid="nav-group-links" class="css-1isemmb"></div></div><a class="css-1rqvyud" href="/react-toggle/">Get Started</a><a class="css-1rqvyud" href="/react-toggle/theming">Theming</a><a aria-current="page" class="css-1rqvyud active" href="/react-toggle/upgrade">Upgrade Guide</a><style data-emotion-css="1ooej63">.css-1ooej63{margin-top:8px;margin-bottom:8px;display:block;color:var(--theme-ui-colors-sidebar-tocLink,#67788a);-webkit-text-decoration:none;text-decoration:none;font-size:14px;margin-left:16px;position:relative;}.css-1ooej63.active{color:var(--theme-ui-colors-sidebar-tocLinkActive,#1D2330);}.css-1ooej63.active::before{content:"";position:absolute;display:block;top:2px;left:-8px;height:1rem;background-color:var(--theme-ui-colors-primary,#0B5FFF);-webkit-transition:width 200ms ease 0s;transition:width 200ms ease 0s;width:2px;border-radius:1px;}</style><a class=" css-1ooej63" href="/react-toggle/upgrade#upgrade-to-20-from-1x">Upgrade to 2.0 from 1.x</a><a class=" css-1ooej63" href="/react-toggle/upgrade#labels">Labels</a><a class=" css-1ooej63" href="/react-toggle/upgrade#events">Events</a><a class=" css-1ooej63" href="/react-toggle/upgrade#mode-prop">Mode prop</a><a class=" css-1ooej63" href="/react-toggle/upgrade#theme-prop">Theme prop</a></div><style data-emotion-css="1w3d2mg">.css-1w3d2mg{background-color:var(--theme-ui-colors-background,#FFFFFF);position:relative;max-width:1280px;padding-top:48px;padding-bottom:48px;padding-left:32px;padding-right:32px;padding:32px;}@media screen and (max-width:57.5em){.css-1w3d2mg{padding-top:48px;padding-bottom:32px;padding-left:32px;padding-right:32px;}}</style><style data-emotion-css="kjtkh5">.css-kjtkh5{width:100%;min-width:0;max-width:1280px;margin-left:auto;margin-right:auto;padding:32px;background-color:var(--theme-ui-colors-background,#FFFFFF);position:relative;max-width:1280px;padding-top:48px;padding-bottom:48px;padding-left:32px;padding-right:32px;padding:32px;}@media screen and (max-width:57.5em){.css-kjtkh5{padding-top:48px;padding-bottom:32px;padding-left:32px;padding-right:32px;}}</style><style data-emotion-css="1307vk3">.css-1307vk3{box-sizing:border-box;min-width:0;width:100%;min-width:0;max-width:1280px;margin-left:auto;margin-right:auto;padding:32px;background-color:var(--theme-ui-colors-background,#FFFFFF);position:relative;max-width:1280px;padding-top:48px;padding-bottom:48px;padding-left:32px;padding-right:32px;padding:32px;}@media screen and (max-width:57.5em){.css-1307vk3{padding-top:48px;padding-bottom:32px;padding-left:32px;padding-right:32px;}}</style><div data-testid="main-container" class="css-1307vk3"><style data-emotion-css="1vci3bl">.css-1vci3bl{padding:0;margin:0;margin-bottom:16px;font-size:48px;font-family:'Source Sans Pro',sans-serif;line-height:1.125;font-weight:700;}</style><h1 id="upgrade-guide" class="css-1vci3bl">Upgrade Guide</h1><h2 id="upgrade-to-20-from-1x"><style data-emotion-css="1r0pe6c">.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}</style><a href="#upgrade-to-20-from-1x" class="css-1r0pe6c">Upgrade to 2.0 from 1.x</a></h2><style data-emotion-css="1ftn47p">.css-1ftn47p{padding:0;margin:0;margin-bottom:16px;}</style><p class="css-1ftn47p">This version is not fully compatible with the previous 1.x versions. Anyway, you may update your code easly</p><h2 id="labels"><a href="#labels" class="css-1r0pe6c">Labels</a></h2><p class="css-1ftn47p">First of all, we've removed the props for the labels. You can upgrade your code by following</p><div><style data-emotion-css="1h0sj8d">.css-1h0sj8d{padding:16px;margin:0;margin-bottom:32px;font-size:85%;margin-top:32px;text-align:left;font-family:Inconsolata;border-radius:4px;}.css-1h0sj8d dark{[object Object];}.css-1h0sj8d light{[object Object];}</style><pre class="language-jsx prism-code language-jsx css-1h0sj8d" style="font-family:Inconsolata;color:#393A34;background-color:#f6f8fa" data-testid="code"><div class="token-line" style="font-family:Inconsolata;color:#393A34"><style data-emotion-css="1baulvz">.css-1baulvz{display:inline-block;}</style><span class="token comment css-1baulvz" style="color:#999988;font-style:italic">// previous v1.x</span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"></span><span class="token tag punctuation css-1baulvz" style="color:#393A34"><</span><span class="token tag class-name css-1baulvz" style="color:#00009f">Toggle</span><span class="token tag css-1baulvz" style="color:#00009f"> </span><span class="token tag attr-name css-1baulvz" style="color:#00a4db">label</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">=</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">"</span><span class="token tag attr-value css-1baulvz" style="color:#e3116c">Left label</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">"</span><span class="token tag css-1baulvz" style="color:#00009f"> </span><span class="token tag punctuation css-1baulvz" style="color:#393A34">/></span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz" style="display:inline-block"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"></span><span class="token comment css-1baulvz" style="color:#999988;font-style:italic">// Left label from v2.x</span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"></span><span class="token tag punctuation css-1baulvz" style="color:#393A34"><</span><span class="token tag css-1baulvz" style="color:#00009f">label</span><span class="token tag css-1baulvz" style="color:#00009f"> </span><span class="token tag attr-name css-1baulvz" style="color:#00a4db">htmlFor</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">=</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">"</span><span class="token tag attr-value css-1baulvz" style="color:#e3116c">toggle-a</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">"</span><span class="token tag punctuation css-1baulvz" style="color:#393A34">></span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"> Click me</span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"> </span><span class="token tag punctuation css-1baulvz" style="color:#393A34"><</span><span class="token tag class-name css-1baulvz" style="color:#00009f">Toggle</span><span class="token tag css-1baulvz" style="color:#00009f"> </span><span class="token tag attr-name css-1baulvz" style="color:#00a4db">name</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">=</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">"</span><span class="token tag attr-value css-1baulvz" style="color:#e3116c">toggle-a</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">"</span><span class="token tag css-1baulvz" style="color:#00009f"> </span><span class="token tag punctuation css-1baulvz" style="color:#393A34">/></span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"></span><span class="token tag punctuation css-1baulvz" style="color:#393A34"></</span><span class="token tag css-1baulvz" style="color:#00009f">label</span><span class="token tag punctuation css-1baulvz" style="color:#393A34">></span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz" style="display:inline-block"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"></span><span class="token comment css-1baulvz" style="color:#999988;font-style:italic">// Right label from v2.x</span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"></span><span class="token tag punctuation css-1baulvz" style="color:#393A34"><</span><span class="token tag css-1baulvz" style="color:#00009f">label</span><span class="token tag css-1baulvz" style="color:#00009f"> </span><span class="token tag attr-name css-1baulvz" style="color:#00a4db">htmlFor</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">=</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">"</span><span class="token tag attr-value css-1baulvz" style="color:#e3116c">toggle-b</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">"</span><span class="token tag punctuation css-1baulvz" style="color:#393A34">></span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"> </span><span class="token tag punctuation css-1baulvz" style="color:#393A34"><</span><span class="token tag class-name css-1baulvz" style="color:#00009f">Toggle</span><span class="token tag css-1baulvz" style="color:#00009f"> </span><span class="token tag attr-name css-1baulvz" style="color:#00a4db">name</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">=</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">"</span><span class="token tag attr-value css-1baulvz" style="color:#e3116c">toggle-b</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">"</span><span class="token tag css-1baulvz" style="color:#00009f"> </span><span class="token tag punctuation css-1baulvz" style="color:#393A34">/></span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"> Click me</span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"></span><span class="token tag punctuation css-1baulvz" style="color:#393A34"></</span><span class="token tag css-1baulvz" style="color:#00009f">label</span><span class="token tag punctuation css-1baulvz" style="color:#393A34">></span></div></pre></div><h2 id="events"><a href="#events" class="css-1r0pe6c">Events</a></h2><p class="css-1ftn47p">The previous <style data-emotion-css="ueqitl">.css-ueqitl{font-family:Inconsolata;}</style><code class="css-ueqitl">onChange</code> event become <code class="css-ueqitl">onToggle</code></p><div><pre class="language-jsx prism-code language-jsx css-1h0sj8d" style="font-family:Inconsolata;color:#393A34;background-color:#f6f8fa" data-testid="code"><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token comment css-1baulvz" style="color:#999988;font-style:italic">// previous v1.x</span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"></span><span class="token tag punctuation css-1baulvz" style="color:#393A34"><</span><span class="token tag class-name css-1baulvz" style="color:#00009f">Toggle</span><span class="token tag css-1baulvz" style="color:#00009f"> </span><span class="token tag attr-name css-1baulvz" style="color:#00a4db">name</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">=</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">"</span><span class="token tag attr-value css-1baulvz" style="color:#e3116c">toggle-c</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">"</span><span class="token tag css-1baulvz" style="color:#00009f"> </span><span class="token tag attr-name css-1baulvz" style="color:#00a4db">onChange</span><span class="token tag script language-javascript script-punctuation punctuation css-1baulvz" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">{</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">(</span><span class="token tag script language-javascript parameter css-1baulvz" style="color:#00009f">checked</span><span class="token tag script language-javascript parameter punctuation css-1baulvz" style="color:#393A34">,</span><span class="token tag script language-javascript parameter css-1baulvz" style="color:#00009f"> evt</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">)</span><span class="token tag script language-javascript css-1baulvz" style="color:#00009f"> </span><span class="token tag script language-javascript operator css-1baulvz" style="color:#393A34">=></span><span class="token tag script language-javascript css-1baulvz" style="color:#00009f"> console</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">.</span><span class="token tag script language-javascript function css-1baulvz" style="color:#d73a49">log</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">(</span><span class="token tag script language-javascript css-1baulvz" style="color:#00009f">e</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">.</span><span class="token tag script language-javascript css-1baulvz" style="color:#00009f">target</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">.</span><span class="token tag script language-javascript css-1baulvz" style="color:#00009f">checked</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">)</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">}</span><span class="token tag css-1baulvz" style="color:#00009f"> </span><span class="token tag punctuation css-1baulvz" style="color:#393A34">/></span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz" style="display:inline-block"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"></span><span class="token comment css-1baulvz" style="color:#999988;font-style:italic">// from v2.x</span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"></span><span class="token tag punctuation css-1baulvz" style="color:#393A34"><</span><span class="token tag class-name css-1baulvz" style="color:#00009f">Toggle</span><span class="token tag css-1baulvz" style="color:#00009f"> </span><span class="token tag attr-name css-1baulvz" style="color:#00a4db">name</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">=</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">"</span><span class="token tag attr-value css-1baulvz" style="color:#e3116c">toggle-c</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">"</span><span class="token tag css-1baulvz" style="color:#00009f"> </span><span class="token tag attr-name css-1baulvz" style="color:#00a4db">onToggle</span><span class="token tag script language-javascript script-punctuation punctuation css-1baulvz" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">{</span><span class="token tag script language-javascript parameter css-1baulvz" style="color:#00009f">e</span><span class="token tag script language-javascript css-1baulvz" style="color:#00009f"> </span><span class="token tag script language-javascript operator css-1baulvz" style="color:#393A34">=></span><span class="token tag script language-javascript css-1baulvz" style="color:#00009f"> console</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">.</span><span class="token tag script language-javascript function css-1baulvz" style="color:#d73a49">log</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">(</span><span class="token tag script language-javascript css-1baulvz" style="color:#00009f">e</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">.</span><span class="token tag script language-javascript css-1baulvz" style="color:#00009f">target</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">.</span><span class="token tag script language-javascript css-1baulvz" style="color:#00009f">checked</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">)</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">}</span><span class="token tag css-1baulvz" style="color:#00009f"> </span><span class="token tag punctuation css-1baulvz" style="color:#393A34">/></span></div></pre></div><p class="css-1ftn47p">The new <code class="css-ueqitl">onToggle</code> event, has got only one param, I mean, the standard <code class="css-ueqitl">event</code> object.
In fact, you will be able to get all information about the toggle by using <code class="css-ueqitl">e.target</code> as shown above.</p><p class="css-1ftn47p">In addition, you may use the new <code class="css-ueqitl">onRight</code> and <code class="css-ueqitl">onLeft</code> events. They are trigged when the toggle is switched from the left to the right and vice versa. In short, when it's <style data-emotion-css="1vg6q84">.css-1vg6q84{font-weight:700;}</style><strong class="css-1vg6q84">on</strong> (usually) and <strong class="css-1vg6q84">off</strong> (usually).</p><div><pre class="language-jsx prism-code language-jsx css-1h0sj8d" style="font-family:Inconsolata;color:#393A34;background-color:#f6f8fa" data-testid="code"><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token comment css-1baulvz" style="color:#999988;font-style:italic">// from left to the right "on"</span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"></span><span class="token tag punctuation css-1baulvz" style="color:#393A34"><</span><span class="token tag class-name css-1baulvz" style="color:#00009f">Toggle</span><span class="token tag css-1baulvz" style="color:#00009f"> </span><span class="token tag attr-name css-1baulvz" style="color:#00a4db">name</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">=</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">"</span><span class="token tag attr-value css-1baulvz" style="color:#e3116c">toggle-c</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">"</span><span class="token tag css-1baulvz" style="color:#00009f"> </span><span class="token tag attr-name css-1baulvz" style="color:#00a4db">onRight</span><span class="token tag script language-javascript script-punctuation punctuation css-1baulvz" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">{</span><span class="token tag script language-javascript parameter css-1baulvz" style="color:#00009f">e</span><span class="token tag script language-javascript css-1baulvz" style="color:#00009f"> </span><span class="token tag script language-javascript operator css-1baulvz" style="color:#393A34">=></span><span class="token tag script language-javascript css-1baulvz" style="color:#00009f"> console</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">.</span><span class="token tag script language-javascript function css-1baulvz" style="color:#d73a49">log</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">(</span><span class="token tag script language-javascript css-1baulvz" style="color:#00009f">e</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">.</span><span class="token tag script language-javascript css-1baulvz" style="color:#00009f">target</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">.</span><span class="token tag script language-javascript css-1baulvz" style="color:#00009f">name</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">)</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">}</span><span class="token tag css-1baulvz" style="color:#00009f"> </span><span class="token tag punctuation css-1baulvz" style="color:#393A34">/></span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz" style="display:inline-block"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"></span><span class="token comment css-1baulvz" style="color:#999988;font-style:italic">// from right to the left "off"</span><span class="token plain css-1baulvz"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz"></span><span class="token tag punctuation css-1baulvz" style="color:#393A34"><</span><span class="token tag class-name css-1baulvz" style="color:#00009f">Toggle</span><span class="token tag css-1baulvz" style="color:#00009f"> </span><span class="token tag attr-name css-1baulvz" style="color:#00a4db">name</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">=</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">"</span><span class="token tag attr-value css-1baulvz" style="color:#e3116c">toggle-c</span><span class="token tag attr-value punctuation css-1baulvz" style="color:#393A34">"</span><span class="token tag css-1baulvz" style="color:#00009f"> </span><span class="token tag attr-name css-1baulvz" style="color:#00a4db">onLeft</span><span class="token tag script language-javascript script-punctuation punctuation css-1baulvz" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">{</span><span class="token tag script language-javascript parameter css-1baulvz" style="color:#00009f">e</span><span class="token tag script language-javascript css-1baulvz" style="color:#00009f"> </span><span class="token tag script language-javascript operator css-1baulvz" style="color:#393A34">=></span><span class="token tag script language-javascript css-1baulvz" style="color:#00009f"> console</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">.</span><span class="token tag script language-javascript function css-1baulvz" style="color:#d73a49">log</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">(</span><span class="token tag script language-javascript css-1baulvz" style="color:#00009f">e</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">.</span><span class="token tag script language-javascript css-1baulvz" style="color:#00009f">target</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">.</span><span class="token tag script language-javascript css-1baulvz" style="color:#00009f">name</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">)</span><span class="token tag script language-javascript punctuation css-1baulvz" style="color:#393A34">}</span><span class="token tag css-1baulvz" style="color:#00009f"> </span><span class="token tag punctuation css-1baulvz" style="color:#393A34">/></span></div></pre></div><h2 id="mode-prop"><a href="#mode-prop" class="css-1r0pe6c">Mode prop</a></h2><p class="css-1ftn47p">Also the prop <code class="css-ueqitl">mode</code> is no longer available. This because in the previous version the <code class="css-ueqitl">mode="switch"</code> was keeping the "on" and "off" appearance colours the same. Now, you can do the same by using the new props. See the <style data-emotion-css="1iv9jyz">.css-1iv9jyz{color:var(--theme-ui-colors-primary,#0B5FFF);-webkit-text-decoration:none;text-decoration:none;}.css-1iv9jyz:hover{color:secondary;-webkit-text-decoration:underline;text-decoration:underline;}</style><a href="/react-toggle/theming" class="css-1iv9jyz">Theming</a> section for more details.</p><h2 id="theme-prop"><a href="#theme-prop" class="css-1r0pe6c">Theme prop</a></h2><p class="css-1ftn47p">We have also removed the <code class="css-ueqitl">theme</code> 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 <a href="/react-toggle/theming" class="css-1iv9jyz">Theming</a> section for more details.</p></div></div></main></div></div></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/upgrade";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-d0a47dca2b5d1b408c83.js"],"component---code-of-conduct-md":["/component---code-of-conduct-md-d54928cb0bd0d43e52f3.js"],"component---srcdocs-theming-mdx":["/component---srcdocs-theming-mdx-c292665b7998848ec7ec.js"],"component---srcdocs-upgrade-mdx":["/component---srcdocs-upgrade-mdx-c6eadf8f582d6cf92114.js"],"component---srcdocs-getstarted-mdx":["/component---srcdocs-getstarted-mdx-9a40a16773f9a637c369.js"],"component---srcdocs-components-toggle-toggle-mdx":["/component---srcdocs-components-toggle-toggle-mdx-9299f5eef9c8f4577218.js"],"component---src-pages-404-js":["/component---src-pages-404-js-b251b15ff0df26ecccce.js"]};/*]]>*/</script><script src="/react-toggle/component---srcdocs-upgrade-mdx-c6eadf8f582d6cf92114.js" async=""></script><script src="/react-toggle/commons-f5facf3ce4d6402c14af.js" async=""></script><script src="/react-toggle/app-d0a47dca2b5d1b408c83.js" async=""></script><script src="/react-toggle/styles-41a9f6aa338c835e034b.js" async=""></script><script src="/react-toggle/webpack-runtime-950e38aff32dfc4babdc.js" async=""></script></body></html>