/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

6 votes379 views2 answers
Export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom'
Javascript React
5 votes392 views3 answers
CocoaPods could not find compatible versions for pod "ReactCommon/jscallinvoker"
Javascript React
2 votes361 views3 answers
React native swiper
Javascript React
0 vote341 views1 answer
How to change list item text color in react
Javascript React
0 vote365 views1 answer
How to remove console.log from react native app
Javascript React
4 votes344 views1 answer
Enable emmit on react
Javascript React
0 vote388 views1 answer
Ab mob react native expo
Javascript React
1 vote332 views1 answer
Bootstrap icons react
Javascript React
0 vote300 views1 answer
Dull a background image in react native
Javascript React
0 vote348 views1 answer
React hook form submit outside form
Javascript React