How to Create a Toggle Switch in React as a Reusable Component ?
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 be reused in future projects. We’ll develop a simple demo toggle-switch-react app that uses this custom totoggle-switchgle switch component. We’ll use common HTML tags with some styling to create this reusable component. You can also create a switch using the Material UI
Prerequisites:
Approach:
To Create a Toggle Switch in React as a Reusable Component
- Create a ToggleSwitch Component with a label prop.
- Define an input of type checkbox inside the component.
- Add a label for the input and style using CSS :before, :after to get the required output.
Steps to Create React Application:
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
Project Structure:
Example: This example creates a ToggelSwitch component using a checkbox input and css classes for styling.
JavaScript
// Filename: 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; |
Javascript
// Filename: ./components/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; |
CSS
/* Filename: ./components/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.3 s ease-in 0 s; } .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.3 s ease-in 0 s; } .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:
Contact Us