React Hooks에서 토글 시 비밀번호 표시/숨기기

SignUp/SignIn 양식을 작성할 때 사용자가 입력한 현재 값을 볼 수 있는 기능을 구현하는 것이 멋질 것입니다. React를 사용하여 이 작업을 수행하는 것은 정말 쉽습니다. 자세히 살펴보겠습니다.

npm i react-hook-form

기본 유효성 검사를 위해 react-hook-form을 설치합니다. 멋진 눈 아이콘에 fontawesome icons을 사용하십시오.

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/react-fontawesome

이제 두 개의 입력과 제출 버튼이 있는 기본 양식인 구성 요소를 만들 수 있습니다.

import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEye } from "@fortawesome/free-solid-svg-icons";
const eye = <FontAwesomeIcon icon={faEye} />;

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => {
    console.log(data);
  };

  return (
    <div className="App">
      <input
        name="username"
        type="text"
        placeholder="Username"
        ref={register({ required: "This is required." })}
      />
      <div className="pass-wrapper">
        <input
          placeholder="Password"
          name="password"
          type="password"
          ref={register({ required: "This is required." })}
        />
        <i>{eye}</i>
      </div>
      <button type="submit" onClick={handleSubmit(onSubmit)}>
        Submit
      </button>
    </div>
  );
}

더 예쁜 모양을 위해 CSS를 추가하십시오.

.App {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-items: center;
  font-size: 22px;
  max-width: 500px;
  min-height: 672px;
  margin: 0 auto;
  border-radius: 25px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
}

.App > input {
  margin-top: 200px;
}

input {
  margin: 0 auto;
  background-color: black;
  opacity: 50%;
  color: white;
  margin-top: 10px;
  width: 300px;
  height: 59px;
  font-size: 22px;
  margin-bottom: 14px;
  max-width: 527px;
  padding: 0 10%;
}

.pass-wrapper {
  position: relative;
  display: flex;
  margin-bottom: 14px;
}

i {
  position: absolute;
  top: 38%;
  right: 16%;
}
i:hover {
  color: #00fcb6;
  cursor: pointer;
}

button {
  width: 300px;
  height: 50px;
  margin: 0 auto;
}

구성 요소는 이제 다음과 같습니다



이제 부울 값이 있는 상태를 추가하여 현재 암호 필드 보기를 추적할 수 있습니다.

const [passwordShown, setPasswordShown] = useState(false);

값을 전환하는 기능

  const togglePasswordVisiblity = () => {
    setPasswordShown(passwordShown ? false : true);
  };

다른 아이콘이나 버튼을 사용하여 프로젝트에 구현할 수 있는 방식으로 눈 아이콘에 onClick 핸들러를 추가할 수 있습니다.

<i onClick={togglePasswordVisiblity}>{eye}</i>

마지막으로 앱의 현재 상태에 따라 입력 유형을 변경합니다.

 <input
             ...
              type={passwordShown ? "text" : "password"}
             ...
            />

이제 눈 아이콘을 클릭하기만 하면 현재 암호 자리 표시자 시각적 개체를 변경할 수 있습니다. 모든 코드를 보려면 이 CodeSandbox 링크Show/Hide Password on toggle를 확인하십시오.
이 튜토리얼이 도움이 되었다면 좋아요를 눌러주세요))