/Javascript/React/Tailwind css toggle switch react

Tailwind css toggle switch react

import { useState, useEffect } from 'react';
import { PropTypes } from 'prop-types';
function Switch(props) {
    const [toggle , setToggle ] = useState(false)
    const toggleClass = 'transform translate-x-12';

    const _handleClick = e => {
        props.cb()
        setToggle(!toggle);
    }

    useEffect(() => {
        setToggle(props.toggled)
    }, [props.toggled])
    return (
        //   Switch Container
        <div
            className="md:w-20 md:h-8 w-12 h-6 flex items-center bg-gray-300 rounded-full p-1 cursor-pointer"
            onClick={() => {
                _handleClick();
            }}
        >
            {/* Switch */}
            <div
                className =  {"bg-white md:w-6 md:h-6 h-5 w-5 rounded-full shadow-md transform " +  (toggle ? null : toggleClass)}
            ></div>
           
            {!toggle && (
                <span className="text-xs -translate-x-5"> {props.offValue}</span>
            )}
            {toggle  && (
                <span className='text-xs translate-x-2'>{props.onValue}</span>
            )}
            
        </div>
    );
}
Switch.PropTypes = {
    cb: PropTypes.func.isRequired,
    toggled: PropTypes.bool.isRequired,
    offValue: PropTypes.string.isRequired,
    onValue: PropTypes.string.isRequired
}
export default Switch;

Similar codes

0 vote266 views1 answer
React native floating button
Javascript React
0 vote255 views1 answer
How to detect an element is been hovered in react
Javascript React
0 vote299 views1 answer
React implicit return
Javascript React
0 vote266 views1 answer
Bootstrap modal disable close on click outside react bootstrap
Javascript React
35 votes276 views6 answers
Create react app with tailwind
Javascript React
18 votes263 views6 answers
Import svg as react component
Javascript React
0 vote278 views2 answers
This.webview.postmessage is not a function reactnative
Javascript React
0 vote255 views1 answer
Javascript Binding Example With React
Javascript React
11 votes264 views3 answers
React app and tailwind
Javascript React
0 vote235 views1 answer
A react component can only return]
Javascript React