How to Implement Hide and Show Password by Toggle in React Js

Introduction

If you've been struggling to create a simple logic to hide and show passwords in React, or you want a different approach to achieving the hide and show feature, then you are at the right place. In this article, I will create an illustration that will serve as a guide.

See the completed project below.

Prerequisites

Before proceeding with this tutorial, I recommend that you have a basic knowledge of:

Using React JS.
Installing React icons.
Styling with CSS.

Without further delay, let's create a component for this illustration and also install React icons that will help us achieve the toggle effect for our password's visibility. To create a component, go to the src folder in your IDE (integrated development environment) and add a file named Form.js. To install React icons, go to your code editor terminal, and in the app directory, type:

npm i react-icons

Hurray! The installation of the React icon was successful. To make the form interactive and beautiful, I will take the following steps:

Create an input for the password.
Import react-icons library.
Add some styling.

Check it out:

//react-icons import
import { AiFillEyeInvisible, AiFillEye } from "react-icons/ai";

function Form() {
  return ( 
    <div className='form-container'>
        <form>
            <div className='input-container'>
               <!-- input added -->
              <input
                Type="password"
                placeholder='Password'
                className='form-input'
              />
            </div>
        </form>
    </div>
  )
}

export default Form

The styling:

/* Adding CSS styles */
.form-container {
  display: flex;
  justify-content: center;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.input-container {
  position: relative;
  margin-bottom: 1.5rem;
}
.form-input {
  border-radius: 0.25rem;
  border: gray 1px solid;
  font-size: 1.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: white;
  color: gray;
  transition: all ease-in-out;
}
.eye-icon {
  position: absolute;
  font-size: 1.25rem;
  cursor: pointer;
  top: 0.75rem;
  right: 0.75rem;
}

Since we are using the useState hook, let's import the useState hook into our application and set the state to false. Check it out:

//useState import
import React, { useState } from 'react'
import { AiFillEyeInvisible, AiFillEye } from "react-icons/ai";

function Form() {
//useState set to false
    const [showPassword, setShowPassword] = useState(false);

  return ( 
    <div className='form-container'>
        <form>
            <div className='input-container'>
              <input
                Type="password"
                placeholder='Password'
                className='form-input'
              />
            </div>
        </form>
    </div>
  )
}

export default Form

Our form is now looking good. Let's proceed by adding icons to the input field. I will add two icons, AiFillEyeInvisible and AiFillEye, and control which one appears by using useState and a conditional statement. It's important to note that showPassword stores the default data in the state, and setShowPassword makes it possible for changes to be made in the state. Check it out:

import React, { useState } from 'react'
import { AiFillEyeInvisible, AiFillEye } from "react-icons/ai";

function Form() {
    const [showPassword, setShowPassword] = useState(false);

  return ( 
    <div className='form-container'>
        <form>
            <div className='input-container'>
              <input
                Type="password"
                placeholder='Password'
                className='form-input'
              />
                <!-- Adding Icons -->
               <AiFillEye className='eye-icon'/>
               <AiFillEyeInvisible className='eye-icon' />                                              
            </div>
        </form>
    </div>
  )
}

export default Form

Enabling Toggling Between the two Icons

The next step is to toggle between the two icons using the onClick event handler. To achieve that, I wrapped the icons with a conditional statement. By default, useState is set to false; if showPassword (which stores the default state) is true, the AiFillEye icon will display; if false, AiFillEyeInvisible will display. In addition, we will add an onClick event to enable us to toggle between the icons. Check it out:

import React, { useState } from 'react'
import { AiFillEyeInvisible, AiFillEye } from "react-icons/ai";

function Form() {
    const [showPassword, setShowPassword] = useState(false);

  return ( 
    <div className='form-container'>
        <form>
            <div className='input-container'>
              <input
                Type="password"
                placeholder='Password'
                className='form-input'
                />
              {showPassword ? (
                <AiFillEye
                  className='eye-icon'
                  onClick={() => setShowPassword((prevState) =>                                                     
                  !prevState)}
                />
              ) : (
                <AiFillEyeInvisible 
                  className='eye-icon'
                  onClick={() => setShowPassword((prevState) =>         
                  !prevState)}
                />
              )}
            </div>
        </form>
    </div>
  )
}

export default Form

How does the code above work? By clicking the icon, the onClick event will trigger, the arrow function will be called, ShowPassword will run with a parameter of PrevState and set the prevState to true. The prevState parameter stores the setShowPassword previous state, which is false. If the prevState is set to true, AiFillEye will display. If you click the icon again, it will set the prevState back to its default state of false, allowing AiFillEyeInvisible to be displayed.

Adding Conditional Statement to Hide and Show Password

The reason we see rounded dots instead of letters when we type in the input field is that the input type is set as a password. Changing the input type from password to text will change the dots to text. To achieve that, I will introduce JavaScript to the type attribute using curly braces, and add a conditional statement that shows text if showPassword is set to true and the password if showPassword is false. Check it out.

import React, { useState } from 'react'
import { AiFillEyeInvisible, AiFillEye } from "react-icons/ai";

function Form() {
    const [showPassword, setShowPassword] = useState(false);

  return ( 
    <div className='form-container'>
        <form>
            <div className='input-container'>
             <!-- conditional statement -->
              <input
                type={showPassword ? "text" : "password"}
                placeholder='Password'
                className='form-input'
                />
              {showPassword ? (
                <AiFillEye
                  className='eye-icon'
                  onClick={() => setShowPassword((prevState) => 
                  !prevState)}
                />
              ) : (
                <AiFillEyeInvisible 
                  className='eye-icon'
                  onClick={() => setShowPassword((prevState) => 
                  !prevState)}
                />
              )}
            </div>
        </form>
    </div>
  )
}

export default Form

How does the code above work? The default useState has been set to false, keeping showPassword to false. Since the conditional statement will show the password type if showPassword is false, the password type will display. Clicking the icons will trigger the onClick event handler and set useState to true. If useState is true, showPassword will be true, and the text will display.

In summary, I am changing the password type attribute to text through conditional statements using the useState hook to change to either true or false.

Run this code to see the outcome

Conclusion

The hide-and-show password feature will come in handy when you want to create a standard form for your web application. This feature also gives users more privacy since they can toggle the visibility of their passwords. I hope you find this article helpful. You can subscribe to get a quick notification for my future articles. Like and share so others can learn. Drop a comment and let me know what you think.

Dev Emeka