Generate a random password in React
In this short article, we’ll show you how to generate a random password in React. Here, we will create a small demo to generate a random password with different options such as lowercase/uppercase string, number and symbols.
You will find similar articles that are created using the React NPM Package.
Steps to generate a random password in React
1. Create react application
First of all, we will create a startup react application using the create-react-app package. Run the following command to create a react app.
1 | npx create-react-app generate-random-password-react |
2. Install npm dependency
Here, we’ll use the generate-password npm package to generate a random strong password. Run the following command to install the package.
1 | npm i generate-password |
3. React component to generate a random password
Using the generate-password package, we can generate a strong random password. Use the following code snippet.
1 2 3 4 5 6 7 8 9 | var generator = require('generate-password'); var password = generator.generate({ length: 10, numbers: true }); // 'eEyDTw31v9' console.log(password); |
For demo purposes, we will create a react component with many options such as lowercase, uppercase, numbers and symbols in the form of checkboxes. Depending on the checkbox selection, we will update the options for password generation.
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | import React, { useState } from "react"; import generator from "generate-password"; function App() { const [password, setPassword] = useState(''); const [length, setLength] = useState(10); const [isLowerCase, setIsLowerCase] = useState(true); const [isUpperCase, setIsUpperCase] = useState(false); const [isNumbers, setIsNumbers] = useState(false); const [isSymbols, setIsSymbols] = useState(false); const generatePassword = () => { const pwd = generator.generate({ length: length, lowercase: isLowerCase, uppercase: isUpperCase, numbers: isNumbers, symbols: isSymbols }); setPassword(pwd); } return ( <div> <h5>Generate a random password in React - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h5> <div class="container"> <div class="row"> <div class="col"> <label> <span classname="lbl-len">Length:</span> <input type="number" classname="input-len form-control" value="{length}" onchange="{e" ==""> setLength(e.target.value)} /> </label> </div> </div> <div class="row"> <div class="col"> <label classname="form-control"> <input type="checkbox" classname="mr-1" checked="{isLowerCase}" onchange={() ==> setIsLowerCase(val => !val)} /> <span>LowerCase</span> </label> </div> <div class="col"> <label classname="form-control"> <input type="checkbox" classname="mr-1" checked="{isUpperCase}" onchange={() ==> setIsUpperCase(val => !val)} /> <span>UpperCase</span> </label> </div> </div> <div class="row"> <div class="col"> <label classname="form-control"> <input type="checkbox" classname="mr-1" checked="{isNumbers}" onchange={() ==> setIsNumbers(val => !val)} /> <span>Numbers</span> </label> </div> <div class="col"> <label classname="form-control"> <input type="checkbox" classname="mr-1" checked="{isSymbols}" onchange={() ==> setIsSymbols(val => !val)} /> <span>Symbols</span> </label> </div> </div> <small>Note: At least one should be true.</small> <div class="row"> <div class="col"> <input type="button" classname="btn btn-dark mt-2 mb-3" value="Generate Password" onclick="{generatePassword}"> <div> Password: {password} </div> </div> </div> </div> </div> ); } export default App; |
4. Output
Run the application and check the output in the browser.
That’s it for today.
Thank you for reading. Happy Coding..!!
