Hide/Show Password in React

When logging in or creating an account for a website or application, it is useful for a user to be able to see their password, especially when passwords are long and include different symbols. I implemented this show/hide password functionality in my React frontend capstone project at Flatiron School. There are many variations of this functionality such as a toggle button or icon change. I chose to use an eye and strikethrough eye icon for my website.

First, I installed the React Icons Kit library and imported the library and the two icons into my React component:

import {Icon} from 'react-icons-kit';
import {eyeOff} from 'react-icons-kit/feather/eyeOff';
import {eye} from 'react-icons-kit/feather/eye'

Next, I created three states. The first state was to manage and eventually set the password of a user, with an initial state of an empty string. The second state was for the type, which had an initial state of 'password'. This will be used in the controlled form to render the password on the page. The last state was for the icon, which had an initial state set as "eyeOff" icon because we want a user's password to be initially hidden:

const [password, setPassword] = useState("");
const [type, setType] = useState('password');
const [icon, setIcon] = useState(eyeOff);

I then created a function that would handle the toggle between the hide password (eyeOff icon) and the show password (eye icon):

const handleToggle = () => {
   if (type==='password'){
      setIcon(eye);
      setType('text')
   } else {
      setIcon(eyeOff)
      setType('password')
   }
}

This handleToggle function is saying: when the type is equal to 'password', have the icon set as eye open icon and show the password in text form, and when the type is anything else, have the icon set as the eyeOff icon and hid the password.

Now that the logic is made, we want to render the password and the toggle hid/show functionality on the page. Inside the return:

return (
     <div>
        <div>
           <div class="mb-4 flex">
              <input
                  type={type}
                  name="password"
                  placeholder="Password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  autoComplete="current-password"
             />
             <span class="flex justify-around items-center" onClick={handleToggle}>
                  <Icon class="absolute mr-10" icon={icon} size={25}/>
              </span>
            </div>
         </div>
      </div>
); 

I used Tailwind CSS framework to style the position of the icon so that the icon is within the password input.

This is how the form looks with the eyeOff icon with password hidden:

And this is how the form looks with the eye icon with the password shown:

And that's it! I originally though this functionality would be very difficult but I was pleasantly surprised how easy this feature was to implement. I hope this was a helpful tutorial!

Comments

[Tomino]

Hi, I like this article it shows common feature, well explained and well executed. That's exactly what people starting off with React need. If I had this as an interview submission I would have invite you for second round 👍
Here are couple of tips to explore:

• Having icon in state is bit redundant, you could just do ternary on the Icon prop
• In this particular example having type value as a state is a bit unnecessary. I would recommend using something like isVisible and have it as a boolean value. You could then do setIsVisible(!isVisible) and do ternary on type prop
• Try to change the type/visible flag in setState callback - gives you something new to explore :)
• For better a11y use button instead of a span for the toggle. That way it will be easier to use for people with screen readers

Above will be a nice exploration for you to do on this feature. Well done for your solution though!

[Anna Q. Harder]

Thank you for your feedback! I will look into these options!

[psd8]

Awesome! It is super simple, Please do checkout this package,
npmjs.com/package/react-password-t...

Using this you can reduce code and also it doesn't use useState instead it's using useRef hook so it makes it more performant in terms of re-rendering.

[Benjamin]

This was super helpful

[Zeeshan]

Instead of using a state for the icon I would suggest to use the ternary operator in javascript. Great article tho!

[Imam Ali Mustofa]

Super Simple! And nice writing,,, ♥️

[Adriana DiPietro]

Hey Anna — great article. Super simple to follow. Out of curiosity, were there any challenges you faced while building this feature? Or anything unexpected you have to accomodate for? :)

[Anna Q. Harder]

I used Tailwind CSS to style the components and getting the eye icons to be correctly positioned was difficult!

[Serena]

Gotta love those usestates, simple and straight to the point! Thank for this

[Pedro Sevilla]

Thank you, I could create my own version of this using your code. Thanks a lot!