Creating a Password Input Field Revealer with React!

What are we making exactly and why?

In this tutorial we will go over how to make a password revealer or in other words, the little eye 👁 that you click to show what you have typed so far in the password input field.

This is a great option for replacing a “Confirm password” input field, which requires a user to input their password twice to make sure that they match. Now of course you can use them both hand and hand, but the only real reason to have a confirm password field is to let the user know “Hey, you did not make a mistake the first time, good job!”. So instead of using a confirm password field, which studies have also shown lowers conversion rate, we can quickly show the user what they typed and confirm with the user that way!

Let’s get started!

Let’s start off by setting up our react app:

npx create-react-app password-revealer

Now open up your application in your favorite text editor and let’s jump into your App.js file.

Let’s replace all that mumbo jumbo in App.js with the following code:

Now let’s run this sucker in our browser and see how it looks! Type the following command in your cli:

npm start

And this is what we have:

Quite beautiful if you ask me…but let’s spice it up a bit more and let’s add the following styles inside of our App.css file.

Replace the contents of App.css with:

Now we’re talking! Back in our browser we have the following:

If the input field looks a little weird or it looks like it’s not centered, add the following style at the top of your Index.css file:

* {
box-sizing: border-box;
}

Now where the heck is our little eye 👁 ? We are going to be making use of the react-icons package that brings in hundreds of SVG icons at our disposal, and in our case we will be using the eye icons!

Let’s install the package, run the following command:

npm install react-icons --save

Now let’s update our App.js file with the following code:

And in our App.css file add the following styles:

And voila! This is what we have:

Now it look’s like you can click on the little eye and it will do something but when you do, you see that it doesn't actually do anything. It’s just sitting there looking all pretty like.

What we need to do is handle onClick event’s on the SVG icons themselves. And as you noticed with the code that we currently have, we set a new state of “inputType” and initialized it with “password” and we set our input fields “type” as InputType. And now we can begin working with the onClick events to update our state and create the effect we want!

Now let’s go ahead and update our App.js file with the following code:

And bam! We got err done. A quick overview about the code above, when we click the outlined eye-icon we say to update our InputType state to be “text”. We do this so that our password input field re-renders so that it’s no longer a “password” type and instead a “text” type and therefore showing the text that we type in. And vise versa, when we click the filled in eye-icon we set the state back to password and our input type will be back to “password” and therefore showing the black dots instead.

Now we are presented with this:

One thing to note, we would usually put the input and label inside of a form but for this tutorial we didn’t. Either way it would work the same way!

Thank you for following along, and have a good one!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store