DEV Community

Cover image for Hide/Show Password in React

Hide/Show Password in React

Anna Q. Harder on February 16, 2023

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 pass...
Collapse
 
tomino2112 profile image
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!

Collapse
 
annaqharder profile image
Anna Q. Harder

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

Collapse
 
psd8 profile image
psd8 • Edited

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.

Collapse
 
aurumdev952 profile image
Benjamin

This was super helpful

Collapse
 
am20dipi profile image
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? :)

Collapse
 
annaqharder profile image
Anna Q. Harder

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

Collapse
 
acidop profile image
Zeeshan

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

Collapse
 
darkterminal profile image
Imam Ali Mustofa

Super Simple! And nice writing,,, ♥️

Collapse
 
pixelrena profile image
Serena

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

Collapse
 
pedro_sevilla_76125228345 profile image
Pedro Sevilla

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

Collapse
 
yankee0707 profile image
mefimay283@fenxz.com

Thank you! It was a great article.