react-toggle-component/docs/component---srcdocs-upgrade-mdx-c6eadf8f582d6cf92114.js

A React UI Component to display an awesome Toggle Button control

(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{Fzxv:function(e,t,n){"use strict";n.r(t),n.d(t,"_frontmatter",(function(){return r})),n.d(t,"default",(function(){return c}));n("5hJT"),n("W1QL"),n("K/PF"),n("t91x"),n("75LO"),n("PJhk");var o=n("SAVP"),a=n("TjRS");n("aD51");function l(){return(l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}var r={};void 0!==r&&r&&r===Object(r)&&Object.isExtensible(r)&&!r.hasOwnProperty("__filemeta")&&Object.defineProperty(r,"__filemeta",{configurable:!0,value:{name:"_frontmatter",filename:"srcdocs/upgrade.mdx"}});var b={_frontmatter:r},i=a.a;function c(e){var t=e.components,n=function(e,t){if(null==e)return{};var n,o,a={},l=Object.keys(e);for(o=0;o<l.length;o++)n=l[o],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,["components"]);return Object(o.b)(i,l({},b,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("h1",{id:"upgrade-guide"},"Upgrade Guide"),Object(o.b)("h2",{id:"upgrade-to-20-from-1x"},"Upgrade to 2.0 from 1.x"),Object(o.b)("p",null,"This version is not fully compatible with the previous 1.x versions. Anyway, you may update your code easly"),Object(o.b)("h2",{id:"labels"},"Labels"),Object(o.b)("p",null,"First of all, we've removed the props for the labels. You can upgrade your code by following"),Object(o.b)("pre",null,Object(o.b)("code",l({parentName:"pre"},{className:"language-jsx"}),'// previous v1.x\n<Toggle label="Left label" />\n\n// Left label from v2.x\n<label htmlFor="toggle-a">\n  Click me\n  <Toggle name="toggle-a" />\n</label>\n\n// Right label from v2.x\n<label htmlFor="toggle-b">\n  <Toggle name="toggle-b" />\n  Click me\n</label>\n')),Object(o.b)("h2",{id:"events"},"Events"),Object(o.b)("p",null,"The previous ",Object(o.b)("inlineCode",{parentName:"p"},"onChange")," event become ",Object(o.b)("inlineCode",{parentName:"p"},"onToggle")),Object(o.b)("pre",null,Object(o.b)("code",l({parentName:"pre"},{className:"language-jsx"}),'// previous v1.x\n<Toggle name="toggle-c" onChange={(checked, evt) => console.log(e.target.checked)} />\n\n// from v2.x\n<Toggle name="toggle-c" onToggle={e => console.log(e.target.checked)} />\n')),Object(o.b)("p",null,"The new ",Object(o.b)("inlineCode",{parentName:"p"},"onToggle")," event, has got only one param, I mean, the standard ",Object(o.b)("inlineCode",{parentName:"p"},"event")," object.\nIn fact, you will be able to get all information about the toggle by using ",Object(o.b)("inlineCode",{parentName:"p"},"e.target")," as shown above."),Object(o.b)("p",null,"In addition, you may use the new ",Object(o.b)("inlineCode",{parentName:"p"},"onRight")," and ",Object(o.b)("inlineCode",{parentName:"p"},"onLeft")," events. They are trigged when the toggle is switched from the left to the right and vice versa. In short, when it's ",Object(o.b)("strong",{parentName:"p"},"on")," (usually) and ",Object(o.b)("strong",{parentName:"p"},"off")," (usually)."),Object(o.b)("pre",null,Object(o.b)("code",l({parentName:"pre"},{className:"language-jsx"}),'// from left to the right "on"\n<Toggle name="toggle-c" onRight={e => console.log(e.target.name)} />\n\n// from right to the left "off"\n<Toggle name="toggle-c" onLeft={e => console.log(e.target.name)} />\n')),Object(o.b)("h2",{id:"mode-prop"},"Mode prop"),Object(o.b)("p",null,"Also the prop ",Object(o.b)("inlineCode",{parentName:"p"},"mode")," is no longer available. This because in the previous version the ",Object(o.b)("inlineCode",{parentName:"p"},'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  ',Object(o.b)("a",l({parentName:"p"},{href:"/react-toggle/theming"}),"Theming")," section for more details."),Object(o.b)("h2",{id:"theme-prop"},"Theme prop"),Object(o.b)("p",null,"We have also removed the ",Object(o.b)("inlineCode",{parentName:"p"},"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 ",Object(o.b)("a",l({parentName:"p"},{href:"/react-toggle/theming"}),"Theming")," section for more details."))}c&&c===Object(c)&&Object.isExtensible(c)&&!c.hasOwnProperty("__filemeta")&&Object.defineProperty(c,"__filemeta",{configurable:!0,value:{name:"MDXContent",filename:"srcdocs/upgrade.mdx"}}),c.isMDXComponent=!0}}]);
//# sourceMappingURL=component---srcdocs-upgrade-mdx-c6eadf8f582d6cf92114.js.map