React 18 Create Reusable Toggle Switch Components Tutorial

Last Updated on by in React JS

React Toggle Switch Button example. Toggle buttons are great for changing the state between ON and OFF. It is one of the UI elements that help the user to set either an ON or OFF state.

The design of the Toggle switch is almost similar to a physical switch that enables users to turn ON or OFF any setting.

In this guide, we will illustrate how to build a toggle switch button in React app. To build the reusable toggle switch button in React, we will use CSS 3.

React allows us to create reusable components; It is a piece of code that is essentially used in React without the need of rewriting repeatedly.

In this tutorial, we will build a Toggle switch button component that shows or sets either the ON or OFF state in React.

Install React Project

Use the npx package runner tool to create a new React app; you must execute the given command from the terminal window.

npx create-react-app react-blog

As soon as the project is installed; move inside the project folder:

cd react-blog

Create New Component

A component file refers to a specific functionality; thus for following the concept of reusability make the components/ directory and also create the ToggleButton.js file with the given code.

import React from 'react'

function ToggleButton() {
  return (
    <div>ToggleButton</div>
  )
}

export default ToggleButton

Style Toggle Button

In this step, we are going to write a couple of CSS codes; this custom CSS code will style and customise the toggle switch button.

Head over to components/Toggle.css file then paste the following code to the file.

.toggle-button {
  width: 58px;
  height: 34px;
  position: relative;
  display: inline-flex;
}

.toggle-button input {
  width: 0;
  height: 0;
}

.toggle-btn {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  transition: 0.6s;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -ms-transition: 0.6s;
  -o-transition: 0.6s;
  position: absolute;
  background-color: rgb(245, 244, 244);
  border-radius: 32px;
  -webkit-border-radius: 32px;
  -moz-border-radius: 32px;
  -ms-border-radius: 32px;
  -o-border-radius: 32px;
}

.toggle-btn:before {
  position: absolute;
  content: "";
  height: 25px;
  width: 24px;
  left: 6px;
  bottom: 6px;
  background-color: #fff;
  transition: 0.6s;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -ms-transition: 0.6s;
  -o-transition: 0.6s;
  border-radius: 32px;
  -webkit-border-radius: 32px;
  -moz-border-radius: 32px;
  -ms-border-radius: 32px;
  -o-border-radius: 32px;
}

.toggle-button input:checked + .toggle-btn {
  background-color: #1244f7;
}

.toggle-button input:checked + .toggle-btn:before {
  -webkit-transform: translateX(28px);
  -ms-transform: translateX(28px);
  transform: translateX(28px);
  -moz-transform: translateX(28px);
  -o-transform: translateX(28px);
}

.toggle-btn.circle {
  border-radius: 33px;
  -webkit-border-radius: 33px;
  -moz-border-radius: 33px;
  -ms-border-radius: 33px;
  -o-border-radius: 33px;
}

.toggle-btn.circle:before {
  border-radius: 51%;
  -webkit-border-radius: 51%;
  -moz-border-radius: 51%;
  -ms-border-radius: 51%;
  -o-border-radius: 51%;
}

Build Toggle Switch

Create the ToggleButton const, pass value, onSwitch, and circle arguments. Define the label, then set the input and span for creating the toggle button.

Thus, add given code to the components/ToggleButton.js file.

import "./Toggle.css";

const ToggleButton = ({ value, onSwitch, circle }) => {
  return (
    <div>
      <h2>React Toggle Switch Button Example</h2>
      <label className="toggle-button">
        <input type="checkbox" checked={value} onChange={onSwitch} />
        <span className={`toggle-btn ${circle ? "circle" : ""}`}></span>
      </label>
    </div>
  );
};

export default ToggleButton;

Register Toggle in Global Component

Our button component is ready, but it won’t show on the browser; therefore, we have to register it inside the global component file.

Update the code into the App.js file as mentioned below.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import ToggleButton from "./components/ToggleButton";

function App() {
  return (
    <div className="container mt-3">
      <ToggleButton />
    </div>
  );
}

export default App;

Run React Server

We are done with the coding part; lastly we have to invoke the react app by running the given command from the terminal.

You can use the given url to view the app.

npm start
http://localhost:3000

React Create Reusable Toggle Switch Components Tutorial

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.