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
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
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
.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:
Last Updated :
06 Dec, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...