A simple Password Generator built with React and Vite. Allows users to create secure passwords with customizable settings.
- Generate random passwords based on user-defined settings.
- Adjustable password length.
- Toggle options for including uppercase letters, numbers, and symbols.
- Copy generated passwords to the clipboard.
-
React - JavaScript library for building user interfaces.
-
Vite - A fast build tool that focuses on frontend development.
-
TailwindCSS - A utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.
- Node.js installed on your machine.
-
Clone the repository:
git clone https://github.com/AshokWebWorks/reactjs-tailwind-secure-password-generator.git
-
Navigate to the project directory:
cd directory_name -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open your browser and visit http://localhost:5173 for React With Vite.
- Adjust the "Password Length" using the range slider.
- Toggle the checkboxes to include or exclude uppercase letters, numbers, and symbols.
- The generated password will update in real-time based on your settings.
- Click on the copy icon to copy the generated password to the clipboard.
- A confirmation message will appear briefly at the bottom when the password is copied successfully.
useCallback
The useCallback hook is employed to memoize the generatePassword function, ensuring that it is not recreated on every render. This optimization is particularly useful when passing functions as props to child components or when dealing with dependencies in the useEffect hook.
useEffect
The useEffect hook is used to generate a password when settings such as password length, uppercase allowance, or symbol allowance change. This ensures that the password is updated in real-time based on the user's preferences.
useRef
The useRef hook is utilized to create a reference to the password input field (passwordRef). This reference is later used to select and copy the password to the clipboard.
useState
The useState hook is employed to manage the state of various variables, such as passLength, numbersAllowed, uppercaseAllowed, SymbolsAllowed, password, and message. These state variables drive the dynamic behavior of the password generator app.