Show and hide password in React
Today we are going to show you how to manage a show and hide password in React. In this short article, we’ll add the input password field to manage the show or hide functionality in ReactJS.
Here, we’ll not use any npm package to manage the show/hide password functionality.
Steps to show and hide password in React
1. Create a react app
Let’s create a startup react application using the create-react-app npm package. Run the following command to create a react application.
1 | npx create-react-app show-hide-password-react |
2. Add password field in component
Now, Let’s design an input password field in the react component. We’ll also add the show/hide image icon to manage the functionality.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | import React, { useState } from 'react'; import showPwdImg from './show-password.svg'; import hidePwdImg from './hide-password.svg'; function App() { const [pwd, setPwd] = useState(''); return ( <div classname="App"> <h3>Show and hide password in React - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> <div classname="pwd-container"> <input name="pwd" placeholder="Enter Password" type="password" value={pwd} onchange={e => setPwd(e.target.value)} /> <img title="Show password" src={showPwdImg} /> </div> </div> ); } export default App; |
index.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | body { margin: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } .pwd-container { position: relative; width: 295px; } .pwd-container input { padding: 5px 30px 5px 10px; font-size: 20px; } .pwd-container img { cursor: pointer; position: absolute; width: 20px; right: 8px; top: 8px; } |
3. Implement show/hide password functionality
To implement show/hide password functionality, we have to change the input type from password to the text and for that we will use the state variable. Also change the show/hide password image based on the same state variable.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | import React, { useState } from 'react'; import showPwdImg from './show-password.svg'; import hidePwdImg from './hide-password.svg'; function App() { const [pwd, setPwd] = useState(''); const [isRevealPwd, setIsRevealPwd] = useState(false); return ( <div className="App"> <h3>Show and hide password in React - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> <div className="pwd-container"> <input name="pwd" placeholder="Enter Password" type={isRevealPwd ? "text" : "password"} value={pwd} onChange={e => setPwd(e.target.value)} /> <img title={isRevealPwd ? "Hide password" : "Show password"} src={isRevealPwd ? hidePwdImg : showPwdImg} onClick={() => setIsRevealPwd(prevState => !prevState)} /> </div> </div> ); } export default App; |
4. Output
Run the react application and check the output in the browser.
That’s it for today.
Thank you for reading. Happy Coding..!!
