ReactJS: Toggle Show Hide Password

Adel Benyahia
3 min readOct 29, 2022

In this tutorial, I will learn how to hide and show password using eye icon in ReactJS, this a very useful feature that you should have on all your login form.

Wee will start from this point: Simple styled login form with ReactJS

How to add this icons?

First: Adding svg icons

Create a folder ./svgs then add these two files

./svgs/hidepassword.svg

<?xml version="1.0" encoding="iso-8859-1"?><!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg height="25" width="25" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 271.452 271.452" style="enable-background:new 0 0 271.452 271.452;" xml:space="preserve"><g><g><path d="M250.393,69.893H21.059C9.447,69.893,0,79.34,0,90.952V180.5c0,11.612,9.447,21.06,21.059,21.06h229.333c11.612,0,21.06-9.447,21.06-21.06V90.952C271.452,79.34,262.005,69.893,250.393,69.893z M88.156,141.055c3.614,2.023,4.904,6.594,2.88,10.208c-1.375,2.455-3.924,3.837-6.551,3.837c-1.24,0-2.498-0.308-3.657-0.958l-10.042-5.623v9.206c0,4.142-3.358,7.5-7.5,7.5s-7.5-3.358-7.5-7.5v-9.205l-10.042,5.622c-1.159,0.649-2.417,0.958-3.657,0.958c-2.627,0-5.176-1.382-6.551-3.837c-2.024-3.614-0.734-8.185,2.88-10.208l9.518-5.329l-9.518-5.329c-3.614-2.023-4.904-6.594-2.88-10.208c2.023-3.613,6.595-4.905,10.208-2.88l10.042,5.622v-9.205c0-4.142,3.358-7.5,7.5-7.5s7.5,3.358,7.5,7.5v9.206l10.042-5.623c3.614-2.023,8.185-0.733,10.208,2.88c2.024,3.614,0.734,8.185-2.88,10.208l-9.518,5.329L88.156,141.055z M160.596,141.055c3.614,2.023,4.904,6.594,2.88,10.208c-1.375,2.455-3.924,3.837-6.551,3.837c-1.24,0-2.498-0.308-3.657-0.958l-10.042-5.622v9.205c0,4.142-3.358,7.5-7.5,7.5s-7.5-3.358-7.5-7.5v-9.206l-10.042,5.623c-1.159,0.649-2.417,0.958-3.657,0.958c-2.627,0-5.176-1.382-6.551-3.837c-2.024-3.614-0.734-8.185,2.88-10.208l9.518-5.329l-9.518-5.329c-3.614-2.023-4.904-6.594-2.88-10.208c2.024-3.613,6.594-4.905,10.208-2.88l10.042,5.623v-9.206c0-4.142,3.358-7.5,7.5-7.5s7.5,3.358,7.5,7.5v9.205l10.042-5.622c3.615-2.023,8.185-0.733,10.208,2.88c2.024,3.614,0.734,8.185-2.88,10.208l-9.518,5.329L160.596,141.055z M233.037,141.055c3.614,2.023,4.904,6.594,2.88,10.208c-1.375,2.455-3.924,3.837-6.551,3.837c-1.24,0-2.498-0.308-3.657-0.958l-10.042-5.622v9.205c0,4.142-3.358,7.5-7.5,7.5s-7.5-3.358-7.5-7.5v-9.205l-10.042,5.622c-1.159,0.649-2.417,0.958-3.657,0.958c-2.627,0-5.176-1.382-6.551-3.837c-2.024-3.614-0.734-8.185,2.88-10.208l9.518-5.329l-9.518-5.329c-3.614-2.023-4.904-6.594-2.88-10.208c2.023-3.613,6.594-4.905,10.208-2.88l10.042,5.622v-9.205c0-4.142,3.358-7.5,7.5-7.5s7.5,3.358,7.5,7.5v9.205l10.042-5.622c3.615-2.023,8.186-0.733,10.208,2.88c2.024,3.614,0.734,8.185-2.88,10.208l-9.518,5.329L233.037,141.055z"/></g></g></svg>

./svgs/showpassword.svg

<?xml version='1.0' encoding='utf-8'?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg  height="25" width="25" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512"><g><g><path d="m251.6,185.7c-36.9,0-67,31.5-67,70.3 0,38.7 30,70.3 67,70.3 36.9,0 67-31.5 67-70.3 0-38.7-30.1-70.3-67-70.3z"/><path d="m251.6,367.1c-59.4,0-107.8-49.8-107.8-111.1 0-61.3 48.4-111.1 107.8-111.1s107.8,49.8 107.8,111.1c0,61.3-48.4,111.1-107.8,111.1zm246.3-121.9c-63.8-102.4-149.8-158.8-241.9-158.8-92.1,0-178.1,56.4-241.9,158.8-4.1,6.6-4.1,15 0,21.6 63.8,102.4 149.8,158.8 241.9,158.8 92.1,0 178-56.4 241.9-158.8 4.1-6.6 4.1-15 0-21.6z"/></g></g></svg>

Second: in <Login> component

. add to the top

const [passwordType, setPasswordType] = useState(“password”);

. Under the password <input> add

<div onClick={() => setPasswordType((prev) => !prev)}>{passwordType ? (<img src={hidePasword} alt="Hide" />) : (<img src={showPassword} alt="Show" />)}</div>

and add these imports on the top

import showPassword from "./svgs/showpassword.svg";import hidePasword from "./svgs/hidepassword.svg";

Third: add some styles

in “./styles.js”

add position relative to the parent element of the <img> with is “.form__controls” in our case

position: relative;

then add

.form__controls img {position: absolute;cursor: pointer;right: 5px;top: 50%;transform: translateY(-50%);}

to style the <img> containing the svg with position “absolute”

NB: we are using {…top: 50%; transform: translateY(-50%);} to vertical-center the svg

Complete project at codesandbox

--

--

Adel Benyahia

Web application developer (HTML │ CSS │ JS | ReactJS | NextJS | NestJS | MERN)