{"id":1556,"date":"2019-07-20T22:57:17","date_gmt":"2019-07-20T22:57:17","guid":{"rendered":"http:\/\/upmostlymulti.onpressidium.com\/?p=1556"},"modified":"2021-10-28T11:03:52","modified_gmt":"2021-10-28T16:03:52","slug":"build-a-react-switch-toggle-component","status":"publish","type":"post","link":"http:\/\/upmostly.com\/tutorials\/build-a-react-switch-toggle-component","title":{"rendered":"Build a React Switch Toggle Component"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1160\" height=\"600\" src=\"http:\/\/upmostly.com\/wp-content\/uploads\/react-switch-toggle-component.jpg\" alt=\"Two React Switch components of different colors.\" class=\"wp-image-1601\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/react-switch-toggle-component.jpg 1160w, https:\/\/upmostly.com\/wp-content\/uploads\/react-switch-toggle-component-300x155.jpg 300w, https:\/\/upmostly.com\/wp-content\/uploads\/react-switch-toggle-component-768x397.jpg 768w, https:\/\/upmostly.com\/wp-content\/uploads\/react-switch-toggle-component-1024x530.jpg 1024w\" sizes=\"auto, (max-width: 1160px) 100vw, 1160px\" \/><\/figure>\n\n\n\n<p>Learn how to build a React switch component using the native HTML checkbox input! You&#8217;ll learn plenty about React checkboxes in the process.<\/p>\n\n\n\n<p>If there&#8217;s one UI component that iOS introduced to the world, it&#8217;s the switch or toggle as some people refer to it as.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"490\" style=\"aspect-ratio: 1200 \/ 490;\" width=\"1200\" autoplay loop muted preload=\"none\" src=\"http:\/\/upmostly.com\/wp-content\/uploads\/react-switch-component.mp4\" playsinline><\/video><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#what-were-building\">What We&#8217;re Building<\/a><\/li><li><a href=\"#building-switch\">Building the React Switch Element using HTML<\/a><\/li><li><a href=\"#css\">Styling our React Switch with CSS<\/a><\/li><li><a href=\"#using\">Using the React Switch Component<\/a><\/li><li><a href=\"#handling-onchange\">Handling onChange and Passing a Value Through Props<\/a><\/li><li><a href=\"#changing-background\">Changing the Background Color onChange<\/a><\/li><li><a href=\"#specifying-color\">Specifying the Switch Color<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-were-building\">What We&#8217;re Building<\/h2>\n\n\n\n<p>Long before iOS introduced the switch, the web&#8217;s boolean input was the trusty checkbox. Checkboxes are of course still used to this day, but the switch improved on the checkbox by emulating physical switches found in the real world. <\/p>\n\n\n\n<p>A switch feels <em>tangible<\/em>. Clicking or tapping it feels like you&#8217;re actually using a real-life switch as opposed to clicking a checkbox.<\/p>\n\n\n\n<p>Therefore, in this tutorial, we&#8217;re going to build a new React switch component that piggybacks on the native HTML checkbox input. And, using some CSS, we&#8217;re going to turn that simple, age-old checkbox into a snazzy looking switch!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"building-switch\">Building the React Switch Element using HTML<\/h2>\n\n\n\n<p>Whenever I&#8217;m building a brand-new React component, I&#8217;ll always, always begin by scaffolding it out in HTML and CSS and when I&#8217;m happy with the look and feel, <em>then<\/em> I&#8217;ll move over to writing the JavaScript.<\/p>\n\n\n\n<p>Create a new file called <strong><span class=\"has-inline-color has-vivid-red-color\">Switch.js<\/span><\/strong> and add the following code to it:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">Switch.js<\/div><pre class=\"language-jsx\"><code class=\"language-jsx\"><div><span class=\"token keyword\">import<\/span> React <span class=\"token keyword\">from<\/span> <span class=\"token string\">'react'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token string\">'.\/Switch.css'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">Switch<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span>\n        <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>react-switch-checkbox<span class=\"token punctuation\">\"<\/span><\/span>\n        <span class=\"token attr-name\">id<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token template-string\"><span class=\"token string\">`react-switch-new`<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>checkbox<span class=\"token punctuation\">\"<\/span><\/span>\n      <span class=\"token punctuation\">\/><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>label<\/span>\n        <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>react-switch-label<span class=\"token punctuation\">\"<\/span><\/span>\n        <span class=\"token attr-name\">htmlFor<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token template-string\"><span class=\"token string\">`react-switch-new`<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span>\n      <span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>span<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token template-string\"><span class=\"token string\">`react-switch-button`<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">\/><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>label<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n    <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Switch<span class=\"token punctuation\">;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>If you saved the component at this point, you&#8217;d see a simple checkbox. That&#8217;s because we use the checkbox input as the basis for our React switch component.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>There&#8217;s no need for us to re-invent the wheel here. A switch is, after all, another way of representing a boolean value (true or false). The checkbox input is a native input to handle boolean values.<\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css\">Styling our React Switch with CSS<\/h2>\n\n\n\n<p>Create a new file under the same directory as the component file, called <strong><span class=\"has-inline-color has-vivid-red-color\">Switch.css<\/span><em>.<\/em><\/strong> Drop in the following CSS. Feel free to take a look at each class. I&#8217;m not going to explore the CSS in this tutorial as the focus is on JavaScript and React.<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">Switch.css<\/div><pre class=\"language-css\"><code class=\"language-css\"><div><span class=\"token selector\">.react-switch-checkbox<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">visibility<\/span><span class=\"token punctuation\">:<\/span> hidden<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.react-switch-label<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">align-items<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">justify-content<\/span><span class=\"token punctuation\">:<\/span> space-between<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">cursor<\/span><span class=\"token punctuation\">:<\/span> pointer<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 100px<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> 50px<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> grey<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 100px<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> relative<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> background-color .2s<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.react-switch-label .react-switch-button<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token property\">content<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">''<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> absolute<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">top<\/span><span class=\"token punctuation\">:<\/span> 2px<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">left<\/span><span class=\"token punctuation\">:<\/span> 2px<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 45px<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> 45px<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 45px<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> 0.2s<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> #fff<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">box-shadow<\/span><span class=\"token punctuation\">:<\/span> 0 0 2px 0 <span class=\"token function\">rgba<\/span><span class=\"token punctuation\">(<\/span>10, 10, 10, 0.29<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.react-switch-checkbox:checked + .react-switch-label .react-switch-button<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token property\">left<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">calc<\/span><span class=\"token punctuation\">(<\/span>100% - 2px<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">transform<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">translateX<\/span><span class=\"token punctuation\">(<\/span>-100%<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.react-switch-label:active .react-switch-button<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 60px<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"using\">Using the React Switch Component<\/h2>\n\n\n\n<p>There&#8217;s one last step required in order for us to use the React switch component and that&#8217;s importing it into another component file and declaring it:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">App.js<\/div><pre class=\"language-jsx\"><code class=\"language-jsx\"><div><span class=\"token keyword\">import<\/span> React <span class=\"token keyword\">from<\/span> <span class=\"token string\">'react'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Switch <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/Switch\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">App<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>app<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>Switch<\/span> <span class=\"token punctuation\">\/><\/span><\/span><span class=\"token plain-text\">\n    <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> App<span class=\"token punctuation\">;<\/span>\n<\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Save the file, jump over to your browser and watch the simple checkbox input transform into a rather beautiful looking switch input!<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"490\" style=\"aspect-ratio: 1200 \/ 490;\" width=\"1200\" autoplay loop muted preload=\"none\" src=\"http:\/\/upmostly.com\/wp-content\/uploads\/react-switch-styled.mp4\" playsinline><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"handling-onchange\">Handling onChange and Passing a Value Through Props<\/h2>\n\n\n\n<p>Although our React switch may look like it&#8217;s functional, behind the scenes it&#8217;s not actually changing its value.<\/p>\n\n\n\n<p>That&#8217;s because our switch&#8217;s checkbox input does not have two very important attributes. These are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>checked<\/li><li>onChange<\/li><\/ul>\n\n\n\n<p>The <strong>checked<\/strong> attribute stores the input&#8217;s current value. In our case, it would be <strong>true <\/strong>or <strong>false<\/strong>.<\/p>\n\n\n\n<p>The <strong>onChange<\/strong> attribute is an event handler that triggers whenever the switch toggles. We&#8217;ll use this event handler to change the component&#8217;s current value.<\/p>\n\n\n\n<p>Before we jump into some code, let&#8217;s talk about &#8216;stateless&#8217; components and &#8216;stateful&#8217; components. A stateless component, or &#8216;dumb&#8217; component, is a component that does not control its own state. As a result, it requires another component to keep track of the React switch component&#8217;s state. <\/p>\n\n\n\n<p>Our React switch component is going to be a stateless component. Therefore, it requires us to pass a value from a parent component through its props.<\/p>\n\n\n\n<p>Open up <strong><span class=\"has-inline-color has-vivid-red-color\">Switch.js<\/span><\/strong> and modify it with the following:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">Switch.js<\/div><pre class=\"language-jsx\"><code class=\"language-jsx\"><div><span class=\"token keyword\">import<\/span> React <span class=\"token keyword\">from<\/span> <span class=\"token string\">'react'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">Switch<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> isOn<span class=\"token punctuation\">,<\/span> handleToggle <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span>\n        <span class=\"token attr-name\">checked<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>isOn<span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token attr-name\">onChange<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>handleToggle<span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>react-switch-checkbox<span class=\"token punctuation\">\"<\/span><\/span>\n        <span class=\"token attr-name\">id<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token template-string\"><span class=\"token string\">`react-switch-new`<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>checkbox<span class=\"token punctuation\">\"<\/span><\/span>\n      <span class=\"token punctuation\">\/><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>label<\/span>\n        <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>react-switch-label<span class=\"token punctuation\">\"<\/span><\/span>\n        <span class=\"token attr-name\">htmlFor<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token template-string\"><span class=\"token string\">`react-switch-new`<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span>\n      <span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>span<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token template-string\"><span class=\"token string\">`react-switch-button`<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">\/><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>label<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n    <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Switch<span class=\"token punctuation\">;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>The code above makes four new additions:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>isOn<\/strong> is passed in through props<\/li><li><strong><em>handleToggle<\/em><\/strong> function is passed in through props<\/li><li><strong>checked<\/strong> attribute is added, and uses the value from the <strong>isOn<\/strong> prop<\/li><li><strong><em>onChange<\/em><\/strong> event handler is added and uses the <strong><em>handleToggle<\/em><\/strong> function prop<\/li><\/ul>\n\n\n\n<p>Finally, open up the parent component (I&#8217;m using <strong><span class=\"has-inline-color has-vivid-red-color\">App.js<\/span><\/strong>) and modify the React Switch component declaration to match the following code:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">App.js<\/div><pre class=\"language-jsx\"><code class=\"language-jsx\"><div><span class=\"token keyword\">import<\/span> React<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> useState <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'react'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token string\">'.\/App.css'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Switch <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/Switch\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">App<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">[<\/span>value<span class=\"token punctuation\">,<\/span> setValue<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> <span class=\"token function\">useState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token boolean\">false<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>app<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>Switch<\/span>\n        <span class=\"token attr-name\">isOn<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>value<span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token attr-name\">handleToggle<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token function\">setValue<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>value<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span><\/span>\n      <span class=\"token punctuation\">\/><\/span><\/span><span class=\"token plain-text\">\n    <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> App<span class=\"token punctuation\">;<\/span>\n<\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Notice how this parent component now has state from using the useState Hook. That means that this component is going to pass down the state value into our React switch component&#8217;s <strong>isOn<\/strong> prop.<\/p>\n\n\n\n<p>We also pass down the state setter function, <strong><em>setValue<\/em><\/strong>, into the <strong><em>handleToggle<\/em><\/strong> prop. As a result, when the Switch component is toggled and changes its value, it will call what is passed to the handleToggle prop.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"changing-background\">Changing the Background Color onChange<\/h2>\n\n\n\n<p>If you saved the React switch component and toggled it in the UI, you&#8217;d see that there is <span style=\"text-decoration: underline;\">no visual difference<\/span>&#8230;<\/p>\n\n\n\n<p>&#8230;yet.<\/p>\n\n\n\n<p>We only have to make one simple change to the React switch component in order to <a href=\"http:\/\/upmostly.com\/tutorials\/changing-the-background-color-in-react\">change the background color<\/a> of the switch. That&#8217;s because we have access to the switch&#8217;s state through the <strong>isOn<\/strong> prop.<\/p>\n\n\n\n<p>Modify the label HTML element inside <strong><span class=\"has-inline-color has-vivid-red-color\">Switch.js<\/span><\/strong> to the following code:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">Switch.js<\/div><pre class=\"language-jsx\"><code class=\"language-jsx\"><div><span class=\"token operator\">...<\/span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>label<\/span>\n  <span class=\"token attr-name\">style<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> background<span class=\"token punctuation\">:<\/span> isOn <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token string\">'#06D6A0'<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span>\n  <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>react-switch-label<span class=\"token punctuation\">\"<\/span><\/span>\n  <span class=\"token attr-name\">htmlFor<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token template-string\"><span class=\"token string\">`react-switch-new`<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span>\n<span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n\n...<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Save the component, jump on over to your browser and you&#8217;ll see a fully working Switch component that lights up green when it&#8217;s turned on!<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"490\" style=\"aspect-ratio: 1200 \/ 490;\" width=\"1200\" autoplay loop muted preload=\"none\" src=\"http:\/\/upmostly.com\/wp-content\/uploads\/react-switch-component.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>And there we have it! We&#8217;ve made a complete React Switch component that toggles, changes value, and lights up green when it&#8217;s on.<\/p>\n\n\n\n<p>Read on if you want to learn how to expand our Switch&#8217;s functionality by specifying the on color.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"specifying-color\">Specifying the Switch Color<\/h2>\n\n\n\n<p>It&#8217;s good practice to build flexible React components so that they may be used in a variety of scenarios. For example, we might want to use a switch component:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>In a sign-in form, as a way to tell the site to remember your user credentials<\/li><li>On a settings page<\/li><li>In a modal dialog for deleting a user account<\/li><\/ul>\n\n\n\n<p>Those are three examples, however, there are countless implementations for a switch.<\/p>\n\n\n\n<p>Here&#8217;s the thing. Right now, our React Switch component only lights up green. What if we wanted it to light up red when we use it in that modal for deleting a user account?<\/p>\n\n\n\n<p>Let&#8217;s add another prop to our switch component, called <strong>onColor<\/strong>:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">Switch.js<\/div><pre class=\"language-jsx\"><code class=\"language-jsx\"><div><span class=\"token keyword\">import<\/span> React <span class=\"token keyword\">from<\/span> <span class=\"token string\">'react'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">Switch<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> isOn<span class=\"token punctuation\">,<\/span> handleToggle<span class=\"token punctuation\">,<\/span> onColor <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span>\n        <span class=\"token attr-name\">checked<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>isOn<span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token attr-name\">onChange<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>handleToggle<span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>react-switch-checkbox<span class=\"token punctuation\">\"<\/span><\/span>\n        <span class=\"token attr-name\">id<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token template-string\"><span class=\"token string\">`react-switch-new`<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>checkbox<span class=\"token punctuation\">\"<\/span><\/span>\n      <span class=\"token punctuation\">\/><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>label<\/span>\n        <span class=\"token attr-name\">style<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> background<span class=\"token punctuation\">:<\/span> isOn <span class=\"token operator\">&amp;&amp;<\/span> onColor <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>react-switch-label<span class=\"token punctuation\">\"<\/span><\/span>\n        <span class=\"token attr-name\">htmlFor<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token template-string\"><span class=\"token string\">`react-switch-new`<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span>\n      <span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>span<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token template-string\"><span class=\"token string\">`react-switch-button`<\/span><\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">\/><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>label<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n    <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Switch<span class=\"token punctuation\">;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>onColor will be a string value representing a hex color. Save that. Jump over to the parent component and add the new onColor prop to the Switch declaration:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">App.js<\/div><pre class=\"language-jsx\"><code class=\"language-jsx\"><div><span class=\"token keyword\">import<\/span> React<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> useState <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'react'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token string\">'.\/App.css'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Switch <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/Switch\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">App<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">[<\/span>value<span class=\"token punctuation\">,<\/span> setValue<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> <span class=\"token function\">useState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token boolean\">false<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>app<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>Switch<\/span>\n        <span class=\"token attr-name\">isOn<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>value<span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token attr-name\">onColor<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>#EF476F<span class=\"token punctuation\">\"<\/span><\/span>\n        <span class=\"token attr-name\">handleToggle<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token function\">setValue<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>value<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span><\/span>\n      <span class=\"token punctuation\">\/><\/span><\/span><span class=\"token plain-text\">\n    <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> App<span class=\"token punctuation\">;<\/span>\n<\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Now we&#8217;ve got a flexible, modular React switch component!<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"490\" style=\"aspect-ratio: 1200 \/ 490;\" width=\"1200\" autoplay loop muted preload=\"none\" src=\"http:\/\/upmostly.com\/wp-content\/uploads\/react-switch-red.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>Thanks for reading, and I really hope you enjoyed this tutorial. I write all of the tutorials on here, and I&#8217;m going to continue adding more and more tutorials each month.<\/p>\n\n\n\n<p>If there&#8217;s a particular tutorial that you want to see, I want to hear from you! <a rel=\"noreferrer noopener\" aria-label=\"Contact me through the about page (opens in a new tab)\" href=\"http:\/\/upmostly.com\/about\" target=\"_blank\">Contact me through the about page<\/a>, even if you aren&#8217;t suggesting a tutorial &#8212; I&#8217;d love to hear from you just the same!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to build a React switch component using the native HTML checkbox input! You&#8217;ll learn plenty about React checkboxes in the process.<\/p>\n","protected":false},"author":8,"featured_media":1601,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[33,4,38],"class_list":["post-1556","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-beginner-react-tutorials","tag-react","tag-react-components"],"acf":[],"_links":{"self":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/1556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/comments?post=1556"}],"version-history":[{"count":2,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/1556\/revisions"}],"predecessor-version":[{"id":3544,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/1556\/revisions\/3544"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media\/1601"}],"wp:attachment":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media?parent=1556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/categories?post=1556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/tags?post=1556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}