Show/Hide Password on toggle in React Hooks
Tags: javascript, react, hooks, password
Published: 2020-03-28 13:49:36

When we build SignUp/SignIn form, it will be cool to implement functionality for the user, can see current values that his enter. It's really easy do this using React, lets dive in too it.


```javascript 
npm i react-hook-form
```
We will install [react-hook-form](https://react-hook-form.com/) just for some basic validation. And use [fontawesome icons](https://fontawesome.com/icons?d=gallery) for some fancy eye icon.
```javascript
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/react-fontawesome
```
Now lets create component, just a basic form with two inputs and submit button

```javascript
import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEye } from "@fortawesome/free-solid-svg-icons";
const eye = <FontAwesomeIcon icon={faEye} />;

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => {
    console.log(data);
  };

  return (
    <div className="App">
      <input
        name="username"
        type="text"
        placeholder="Username"
        ref={register({ required: "This is required." })}
      />
      <div className="pass-wrapper">
        <input
          placeholder="Password"
          name="password"
          type="password"
          ref={register({ required: "This is required." })}
        />
        <i>{eye}</i>
      </div>
      <button type="submit" onClick={handleSubmit(onSubmit)}>
        Submit
      </button>
    </div>
  );
}
```
and add some CSS, for more pretty looks

```javascript
.App {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-items: center;
  font-size: 22px;
  max-width: 500px;
  min-height: 672px;
  margin: 0 auto;
  border-radius: 25px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
}

.App > input {
  margin-top: 200px;
}

input {
  margin: 0 auto;
  background-color: black;
  opacity: 50%;
  color: white;
  margin-top: 10px;
  width: 300px;
  height: 59px;
  font-size: 22px;
  margin-bottom: 14px;
  max-width: 527px;
  padding: 0 10%;
}

.pass-wrapper {
  position: relative;
  display: flex;
  margin-bottom: 14px;
}

i {
  position: absolute;
  top: 38%;
  right: 16%;
}
i:hover {
  color: #00fcb6;
  cursor: pointer;
}

button {
  width: 300px;
  height: 50px;
  margin: 0 auto;
}

```
Component now looks like this 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e0msae6qxaci8c9rt5uv.png)

Now lets add some state with boolean values to track current password field view
```javascript
const [passwordShown, setPasswordShown] = useState(false);
```
and function to toggle values 
```javascript
  const togglePasswordVisiblity = () => {
    setPasswordShown(passwordShown ? false : true);
  };
```
let adding onClick handler to our eye icon, by the way you can use any other icon or button to implement this on your project
```javascript
<i onClick={togglePasswordVisiblity}>{eye}</i>
```
finally we will change input type, depence what current state of the app
```javascript
 <input
             ...
              type={passwordShown ? "text" : "password"}
             ...
            />
```
That's done, now we can change the current password placeholder visual just to click on your eye icon. If you want see all code, please check this CodeSandbox link [Show/Hide Password on toggle](https://codesandbox.io/s/showhide-password-on-toggle-in-react-hooks-95qcz) 
Please give a like, if this tutorial was useful for you))