How to Create a Toggle Switch in React as a Reusable Component ?

14 Jul, 2021
In this article, we’re going to create a Toggle Switch in React as a reusable component. The Toggle Switch Component will be a small reusable component that will be able to reuse in future projects. We’ll develop a simple demo toggle-switch-react app that uses this custom toggle switch component. We’ll use common HTML tags with some styling to create this reusable component. You can also create a switch using Material UI- link.
Creating React Application:
Step 1: Create a React application using the following command:npx create-react-app toggle-switch
Step 1: Create a React application using the following command:
npx create-react-app toggle-switch
Step 2: After creating your project folder i.e. toggle-switch, move to it using the following command:cd toggle-switch
Step 2: After creating your project folder i.e. toggle-switch, move to it using the following command:
cd toggle-switch
 
Project Structure: It will look like the following:
Example:
App.js
import React, { Component } from "react";import ToggleSwitch from "./components/ToggleSwitch";  class App extends Component {  render() {    return (      <React.Fragment>        <ToggleSwitch label="Notifications" />        <ToggleSwitch label="Subscribe" />      </React.Fragment>    );  }}export default App;
ToggleSwitch.js
import React from "react";import "./ToggleSwitch.css";  const ToggleSwitch = ({ label }) => {  return (    <div className="container">      {label}{" "}      <div className="toggle-switch">        <input type="checkbox" className="checkbox"                name={label} id={label} />        <label className="label" htmlFor={label}>          <span className="inner" />          <span className="switch" />        </label>      </div>    </div>  );};  export default ToggleSwitch;
ToggleSwitch.css
.container {  text-align: center;}.toggle-switch {  position: relative;  width: 75px;  display: inline-block;  text-align: left;  top: 8px;}.checkbox {  display: none;}.label {  display: block;  overflow: hidden;  cursor: pointer;  border: 0 solid #bbb;  border-radius: 20px;}.inner {  display: block;  width: 200%;  margin-left: -100%;  transition: margin 0.3s ease-in 0s;}.inner:before,.inner:after {  float: left;  width: 50%;  height: 36px;  padding: 0;  line-height: 36px;  color: #fff;  font-weight: bold;  box-sizing: border-box;}.inner:before {  content: "YES";  padding-left: 10px;  background-color: #060;  color: #fff;}.inner:after {  content: "NO";  padding-right: 10px;  background-color: #bbb;  color: #fff;  text-align: right;}.switch {  display: block;  width: 24px;  margin: 5px;  background: #fff;  position: absolute;  top: 0;  bottom: 0;  right: 40px;  border: 0 solid #bbb;  border-radius: 20px;  transition: all 0.3s ease-in 0s;}.checkbox:checked + .label .inner {  margin-left: 0;}.checkbox:checked + .label .switch {  right: 0px;}
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Picked
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Axios in React: A Guide for Beginners
ReactJS setState()
How to pass data from one component to other component in ReactJS ?
Re-rendering Components in ReactJS
ReactJS defaultProps
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Differences between Functional Components and Class Components in React