To develop aReactSwitching module

Here is a translation:

  • Build a React Switch Toggle Component
  • Source code: github.com/wangkaiwd/r…

HTML
React
React

Here’s the UI component that IOS introduced to the world, and people call it Switch or Toggle.

What are we developing

Before IOS introduced the Switch, booleans on web pages only had checkboxes. Checkboxes can of course still be used today, but Switch has improved checkboxes based on real switches in real life.

Switch feels real. Instead of clicking a check box, the switch clicks just like you’re actually using a switch.

Therefore, in this tutorial, we will develop a new React Switch component based on the native HTML check input box. In addition, we’ll add some CSS styles to turn a simple, ancient check box into a snazzy Switch.

writeSwitchtheHTMLstructure

Whenever I create a new React component, I set up an initial satisfactory HTML and CSS structure before writing JavaScript code.

Create a new switch.js file and add the following code to it:

If you finish this code in the editor at this point, you’ll see a simple check box since we used the native check box as the basis for the React Switch component.

Hint: There’s no need to reinvent the wheel here. After all, switches are another way to display booleans, and checkboxes are the input boxes that handle booleans.

withCSSTo beautify the component

Create a switch.css file in the same directory as the component files and add the following CSS code to get an idea of what each class does. I’m not going to explore CSS in this tutorial, which focuses on JavaScript and React.

useSwitchcomponent

To use the Switch component in React, we need one last step: import the Switch component from another component and declare it in the component:

After saving the file, you can see that in the browser we have converted a simple check box into a nify-looking Switch input box:

throughpropsTo receive events and properties

As practical as our Switch component may seem, the Switch component doesn’t actually change its value.

This is because our component is missing two important properties:

  • checked
  • onChange

The Checked property stores the current value of the input. In our component, it may be true or false.

The onChange event will be triggered whenever we Switch the Switch component, and we will change the value of the Switch component through onChange.

Before writing the code, we need to look at stateless and stateful components. A stateless component, also called a dumb component, cannot control its own state, so another component is required to record the state of the current component.

Our Switch component will be a stateless component that requires the parent component to pass properties to it via props.

Open switch.js and make the following changes:

There are two new additions to the code:

  • checked: passed in by the parent componentcheckedTo control whether it is selected
  • onChange: passed in by the parent componentonChangeTo change the componentcheckedattribute

Finally, open the parent component (I’m using app.tsx) and change the way the component is used:

Note that the state of the parent component now comes from useState hooks. This means that the component is going to pass down the checked property of the Switch component to us.

We also passed the setChecked function down in the onChange function. Thus, when the Switch component switches to change the value, it will call the onChange function passed down from the parent component

Change background color while switching

If you complete the code above, you will see no difference in the visual UI of the Switch component when switching states.

Since we can use the Checked property in the Switch component passed through the parent component props, we can change the background color of the Switch component with a very simple change to the code.

Modify the label element in the switch.tsx component as follows:

Save the component, Switch to your browser page and you’ll see a fully working Switch component. The Switch component turns green when it is active and gray when it is closed.

At this point, we have a fully functional React Switch component that can Switch, change values, and turn green when activated.

Read on if you’d like to know how to extend our Switch components by specifying activation colors.

Specify toggle colors

Developing a flexible React component and being able to use it in many different scenarios is a particularly good programming practice. For example, we might use the Switch component in the following case:

  • In the login form, tell the site to remember your user authentication information
  • On a Settings page
  • Used in the modal box to delete user accounts

These are just three simple examples, but there are countless Switch component scenarios on the web.

There is a problem that our Switch component only shows green when activated. Suppose we want the activation color to be red to better alert the user when we delete the user account in the modal box?

Let’s add another property checkedColor to the Switch component to control the activation color:

CheckedColor is a hexadecimal string. After saving the code, jump to the parent component and add a new checkedColor property to the declared Switch component:

Now we have a flexible, modular Switch component.