Let's implement show or hide password by toggle button in react

As the title describes, In this article, we will implement the Show or Hide Password by Toggle Button In ReactJS, We will create a React component and in this React component we will have an input box as a password and also we will have an eye icon that will behave like a button. And once you click on that eye icon, you can see your entered password as a text and once you click on the eye icon again, the password will be masked with dots.
So, let's get started

Create an eye icon:

First things first, We need to create an SVG icon. This icon we will use as a button in our component where we will show or hide password by toggle button In ReactJS's app. here are the SVG codes that we will import in out component later. This SVG is wrapped in react component so that we can use this SVG like a React component.
File EyeIcon.tsx

                            const EyeIcon = () => {
                                return (
                                    <svg
                                        width='22px'
                                        height='16px'
                                        viewBox='0 0 22 16'
                                    >
                                        <g
                                            id='Mockup'
                                            stroke='none'
                                            strokeWidth='1'
                                            fill='none'
                                            fillRule='evenodd'
                                            strokeLinecap='round'
                                            strokeLinejoin='round'
                                        >
                                            <g
                                                id='7-2-2-1-Users-(invite)'
                                                transform='translate(-544.000000, -357.000000)'
                                                stroke='#43484D'
                                                strokeWidth='2'
                                            >
                                                <g id='Modol'>
                                                    <g
                                                        id='View'
                                                        transform='translate(544.000000, 355.000000)'
                                                    >
                                                        <g
                                                            id='icon-view'
                                                            transform='translate(1.000000, 3.000000)'
                                                        >
                                                            <path
                                                                d='M12.4295051,6.66666667 C12.4295051,7.98142857 11.3591335,9.04761905 10.0392157,9.04761905 C8.71929785,9.04761905 7.64892624,7.98142857 7.64892624,6.66666667 C7.64892624,5.35190476 8.71929785,4.28571429 10.0392157,4.28571429 C11.3591335,4.28571429 12.4295051,5.35190476 12.4295051,6.66666667 L12.4295051,6.66666667 Z'
                                                                id='Stroke-92'
                                                            ></path>
                                                            <path
                                                                d='M0,6.66666667 C1.4327395,2.95666667 6.25156303,0 10.0573819,0 C13.8636788,0 18.6007544,2.90714286 20.0784314,6.57380952'
                                                                id='Stroke-94'
                                                            ></path>
                                                            <path
                                                                d='M0,6.66666667 C1.4327395,10.3766667 6.25156303,13.3333333 10.0573819,13.3333333 C13.8636788,13.3333333 18.6007544,10.4261905 20.0784314,6.75952381'
                                                                id='Stroke-96'
                                                            ></path>
                                                        </g>
                                                    </g>
                                                </g>
                                            </g>
                                        </g>
                                    </svg>
                                );
                            };
                            
                            export default EyeIcon;
                            
                          

Create a component:

In this step, we will create a simple component, and later we will see how we can implement the Show or Hide Password by Toggle Button In ReactJS.

                                // Password Component
                                export default function Password() {
                                return (
                                    <div>
                                        <input type="password" />
                                    </div>
                                );
                                }
                          

The above code is a simple React component that will render an input box with a type password.

Add state to show hide password:

In this step, We have introduced a hook to use state and set value for the state. We have isPasswordShow to use in condition and setIsPasswordShow to toggle the value of isPasswordShow. By default the The password will be masked and will not be displayed as raw text.

                                import { useState } from "react";
                                
                                export default function Password() {
                                    const [isPasswordShow, setIsPasswordShow] = useState(false);
                                    return (
                                        <div>
                                            <input type="password" />
                                        </div>
                                    );
                                }
                          

Implement logic to show hide the password:

In this step, We will have an Icon inside the button, so the Icon will react as a button. When we toggle button, and toggle button will be bind with toggleIsPasswordShowValue(), When toggleIsPasswordShowValue() will be called then this toggleIsPasswordShowValue() will toggle the value of isPasswordShow.
In this, We will change the type based on the condition isPasswordShow value. When the isPasswordShow is true then the type will be text and when the value of isPasswordShow is false then type would be the password, when the type would be password then the value of the input box will not be shown and it will be masked and will not be displayed as raw text.

                            import { useState } from "react";
                            import EyeIcon from '../EyeIcon';
                    
                            const toggleIsPasswordShowValue = () => {
                                setIsPasswordShow(!isPasswordShow);
                            };
                    
                            
                            export default function Password() {
                                const [isPasswordShow, setIsPasswordShow] = useState(false);
                                
                                return (
                                    <div>
                                        <input type={ isPasswordShow ? 'text' : 'password'} value={values} />
                                        {values && (
                                            <button className='eye-icon' onClick={toggleIsPasswordShowValue}>
                                                <EyeIcon />
                                            </button>
                                        )}
                                    </div>
                                );
                            }
                          

Styles:

Don't forget to add the following CSS, if the below css is not working properly then you need to adjust this CSS accordingly.

                                .eye-icon{
                                    position: relative;
                                    top: -27px;
                                    float: right;
                                    right: 10px;
                                    cursor: pointer;
                                }
                          

Output:

Show or Hide Password by Toggle Button In ReactJS

Enhancement:

Further, you can improve your UI with two icon, one for Show Password and other for Hide Password using following logic:

                                    <button className='eye-icon' onClick={toggleIsPasswordShowValue}>
                                        {passwordShown ? <EyeIcon /> : <EyeHideIcon />}
                                    </button>
                            

Visualization:

Show or Hide Password by Toggle Button In ReactJS

---

Conclusion:

Wow, Cool!! 👍
We have implemented the Show or Hide Password by Toggle Button In ReactJS. In this we have created an SVG React component and also created a component where we used hooks to use state. And we have used that state for the condition and toggle the value. Based on the state value it's Show or Hides the Password by Toggle Button.