#31: React Mini Project🔥Toggle Switch Button Component

[@ThapaTechnical]

Hope you love the video🔥
📢 Access Source Code, PPT & Notes here for Free : www.thapatechnical.com/2024/06/react-mini-projecttoggle-switch-button.html
📺 Discover React.js History in Just 10 Minutes - th-cam.com/video/MiK2bFqhg1U/w-d-xo.html
📺 Watch the complete Playlist here : th-cam.com/play/PLwGdqUZWnOp1Rab71vx2zMF6qpwGDB2Z1.html

[@ROHIT-jy6uj]

CSS PAGE:- body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
}
.toggle-switch{
width:100px;
height:50px;
border-radius: 25px;
background-color: #ccc;
position: relative;
cursor: pointer;
padding: 5px;
margin-top: 5rem;
box-shadow: rgba(17,12,46,0.15) 0px 48px 100px 0px;
}
.switch{
width: 40px;
height:40px;
border-radius: 20px;
display:flex;
align-items:center;
justify-content: center;
color:white;
font-weight: bold;
position: absolute;
top:5px;
left:5px;
transition: tranform 0.3s linear, background-color 0.3s linear;
border: 0.2rem solid #ccc;
box-shadow: rgba(100,100, 111,0.2) 0px 7px 29px 0px;
}
.on{
background-color: #4caf50;
transform: translate(50px);
}
.off{
background-color: #f44336;
transform: translateX(0);
}
.switch-state{
margin: 0 10px;
text-transform: uppercase;
}

[@HamzaShahzadEB_]

Toggle switch done thapa technical ❤❤

[@village-vlogs.404]

End ho gia Love you i follow your react series thanks sir ✨✨

[@dineshshinde2116]

Grasp things -
1. Applying the logic of the onClick
2. Conditional Styling
3. Following good practice as which any condition is repeating just make the variable and pass that variable in that

[@priyotoshmaji2859]

Awesome

[@Hamzalodhi-2025]

Good Series.👍👍👍👍

[@AyushPandey-zy2wz]

great to learn with you

[@anjubiswas1264]

Awasome Video❤❤

[@Deeptiharshkla]

Nice project ❤

[@xyonxyt9170]

sir plz try to make 2-3 parts a day

[@jagdishjena9058]

Thank-you-so-much-sir. (10-1-2025)

[@Error-td8fm]

Sir please complete this course asap Because technology is evolving very fast we don't have timw to invest 60-70 days in react there ia already so many series in react but they are not for beginners i have tried them only you told us every minor thing in detail

[@Khaladunnabi]

Done

[@prem_ium]

use tailwind css better for learning

[@village-vlogs.404]

love you

[@HassaanHaider313]

11:47 ak chez apne likha hai
{ isOn ? " on ":" off "}
lekin outputs me
ON OFF uppercase me kese a Raha hai???????????? 11:47

[@Deeptiharshkla]

Span ko switch-state class di hain or usme text- transform property ka use kiya hain

[@only_shorts704]

CSS property

[@karansakure8144]

goood

[@MuhammadAli-ez8fg]

also change the text color mean off switch different color and on switch different color

[@hamudxd9497]

GOOD YAR

[@Pankajpondric]

❤❤❤

[@sudippatil7672]

need of css code

[@rishiraj2548]

👍🏻

[@buntysingh244]

gazab

[@AmberAhmedRaheel]

Hello

[@allsupporthindi161]

Todo wala app laiye

[@CodesolveNetwork]

CSS samne likha kro yrr verna maja nhi aata padne mai

[@InamKhan-b1h]

vinode sir VS code Theme name hi bata do please

[@ThapaTechnical]

Material theme

[@InamKhan-b1h]

@@ThapaTechnical Thanks sir your great and next series is NEXT.JS

[@InamKhan-b1h]

@@ThapaTechnical Thanks sir your great and next series is NEXT.JS

[@Tappa_vollyball]

Bhai mujhe ek Purana laptop de do please mere pass paise nhi lekin mujhe coding sikhna hai Maine AAP ke html, css, JavaScript phone me nhi ban raha please bhaiya

[@vickygupta4263]

Disliked bcoz of ads

[@sainathpatil2674]

using tailwind css
const Toogle = () => {
const [toogle, setToogle] = useState(false);
const handelToogle = () => {
setToogle(!toogle);
};
return (






);
};

[@3_Directions]

using tailwind CSS
------------------------
import { useState } from "react";
export const Toggle = () => {
const [isON, isClick] = useState(false);
const toggleBtn = () => {
isClick(()=>!isON)
}
const isOnSet = isON ? 'bg-green-500 translate-x-16 border-red-100' : 'bg-red-500 border-green-100';
const btnBG = isON ? 'bg-red-500':'bg-green-500'
return (


{isON ? "ON": "OFF"}


)
}