Show/Hide Password on toggle in React Hooks

When we build SignUp/SignIn form, it will be cool to implement functionality for the user, can see current values that his enter. It's really easy do this using React, lets dive in too it.

npm i react-hook-form

We will install react-hook-form just for some basic validation. And use fontawesome icons for some fancy eye icon.

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

Now lets create component, just a basic form with two inputs and submit button

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>
  );
}

and add some CSS, for more pretty looks

.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;
}

Component now looks like this

Now lets add some state with boolean values to track current password field view

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

and function to toggle values

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

let adding onClick handler to our eye icon, by the way you can use any other icon or button to implement this on your project

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

finally we will change input type, depence what current state of the app

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

That's done, now we can change the current password placeholder visual just to click on your eye icon. If you want see all code, please check this CodeSandbox link Show/Hide Password on toggle
Please give a like, if this tutorial was useful for you))

Comments

[userjd9]

Can I also change the icon when clicked? So it'll show a strikethrough icon of an eye instead?
Thanks

Later edit: actually that was pretty simple, I've managed to do it like this:

just use a ternary on your src (if you are using an img element for the icon)

src={passwordShown ? notVisible : visible}

(visible and notVisible being image imports defined in the beginning) or use the same ternary to change the className (if you are using an i tag from fontawesome for eg.)

className={`login-box${passwordShown ? "__notVisible" : "__visible"}`}

[Jude Miracle]

what if it is in a button? how with will make the icon change

[userjd9]

This will work even if img tag is inside the button.
you should have something like:
< button >
< img src={passwordShown ? notVisible : visible} />
< span >Submit< /span >
< /button >

• sorry for the extra space in the tags, but it won't work without

[Pravee Wiangin]

Cool Thanks

[okumujustine]

nice

[Maedeh Zebhi]

thank you
I added the eyeSlash option!

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

< input type={passwordShown?"text":"password"} name="password" />
< i onClick={()=>setPasswordShown(!passwordShown)}>{passwordShown?eye:eyeSlash}`

[arb712]

Thankyou , very helpful!