비밀번호 보기/ 숨기기 기능 - 코드

1. fontawesome install 필요

2. tailwind 사용

import React, {useState} from 'react';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";

const input = ({}) => {
	const[passwordTypem, setPasswordType] = useState({
    	type: 'password',
        visible: false
    });
    
    const handlePasswordType = e => {
    	setPasswordType(() => {
        	if(!passwordType.visible){
            	return {type: 'text', visible: true};
            }
            return {type: 'password', visible: false};
        })
    }
    
    return(
        <input type={passwordType.type} name="userPassword" id="password" placeholder="Your Password" className="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" />
        <span onClick={handlePasswordType}>
            {passwordType.visible ? <FontAwesomeIcon icon={faEye} className="mt-1" /> : <FontAwesomeIcon icon={faEyeSlash} className="mt-1"/>}
        </span>
    )
}

 

See the Pen Untitled by 소망 (@denist2322) on CodePen.