Site icon RemoteStack

How to Build Reusable React Toggle Switch Component

Toggle switches help change the state for specific functionality. A toggle switch, aka “toggles”, is a user interface element that contains two mutual states, e.g., ON and OFF. Toggle switches are almost identical to physical switch that allows us to turn things ON and OFF.

But do you know, How to create a reusable toggle switch component in React js?

Fret not — if your answer is no!

This step-by-step guide will guide you on how to build a reusable React Toggle Switch component from scratch. We will not take the help of any third-party package to create React toggle switch button.

Rather we’ll use custom CSS3 selectors and React useState hook to create React toggle switch button.

A reusable component is a subtle yet comprehensive solution. It’s a piece of code that is created once and reduces the need to write a similar code for the same functionality repeatedly.

Create React Application

Let us form a new React app using following command, follow this step only if you you haven’t created a React app.

npx create-react-app my-react-app

Thereafter, get inside the app folder.

cd my-react-app

Make Component File

Into the src/ folder, create features/ folder and ToggleSwitch.js file.

import React from 'react'

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

export default ToggleSwitch

Create Reusable Toggle Component

In this step, we will implement the toggle switch component hence add or insert the following code into the features/ToggleSwitch.js file.

import "./ToggleSwitch.css";

const ToggleSwitch = ({ val, onToggleSwitch, rounded }) => {
  return (
    <div>
      <h2>React Toggle Switch Component Examle</h2>
      <label className="toggle-switch">
        <input type="checkbox" checked={val} onChange={onToggleSwitch} />
        <span className={`toggle-slide ${rounded ? "rounded" : ""}`}></span>
      </label>
    </div>
  );
};

export default ToggleSwitch;

Style Toggle Switch Button

We have created the component, now we will style the toggle component hence create the features/ToggleSwitch.css file and insert the code into the file.

.toggle-switch {
  position: relative;
  display: inline-flex;
  width: 60px;
  height: 35px;
}

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

.toggle-slide {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  position: absolute;
  background-color: #eee;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}

.toggle-slide:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 5px;
  bottom: 5px;
  background-color: #fff;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}

.toggle-switch input:checked + .toggle-slide {
  background-color: #03a9f4;
}

.toggle-switch input:checked + .toggle-slide:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  -moz-transform: translateX(26px);
  -o-transform: translateX(26px);
}

.toggle-slide.rounded {
  border-radius: 34px;
  -webkit-border-radius: 34px;
  -moz-border-radius: 34px;
  -ms-border-radius: 34px;
  -o-border-radius: 34px;
}

.toggle-slide.rounded:before {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

Update App Js Component

We are almost done with the feature, just open the App.js file and then import the ToggleSwitch component into the global component.

import ToggleSwitch from "./features/ToggleSwitch";

function App() {
  return (
    <div>
      <ToggleSwitch />
    </div>
  );
}

export default App;

View App on Browser

Let us view and test the feature through the browser; therefore, execute the provided command to evoke the React server.

npm start

If you are creating app locally, start the app using the given url.

http://localhost:3000

Conclusion

This tutorial gave us the opportunity to build a custom React toggle switch button in a functional component using CSS3 and the useState hook.

Exit mobile version