https://github.com/akultikkas11/password-generator
Password-Generator using ReactJS
https://github.com/akultikkas11/password-generator
tailwindcss useeffect-hook useref-hook usestate-hook
Last synced: 7 months ago
JSON representation
Password-Generator using ReactJS
- Host: GitHub
- URL: https://github.com/akultikkas11/password-generator
- Owner: akultikkas11
- Created: 2025-07-02T05:00:54.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-07-02T05:19:44.000Z (9 months ago)
- Last Synced: 2025-07-02T06:26:41.811Z (9 months ago)
- Topics: tailwindcss, useeffect-hook, useref-hook, usestate-hook
- Language: JavaScript
- Homepage: https://akultikkas11.github.io/Password-Generator/
- Size: 167 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Password Generator React App
An interactive password generator built with **React** and **Vite**. This app allows users to customize the length and composition of their generated password, including the option to include numbers and special characters. It also features a convenient copy-to-clipboard functionality with tooltip feedback.
---
## 🔗 Live Demo
👉 [https://akultikkas11.github.io/Password-Generator/](https://akultikkas11.github.io/Password-Generator/)
---
## Features
- **Password length control:** Adjustable password length via a slider.
- **Include numbers:** Toggle inclusion of numeric characters.
- **Include special characters:** Toggle inclusion of special symbols.
- **Copy to clipboard:** Copy generated password to clipboard with visual tooltip confirmation.
- **Live password generation:** Password updates automatically as options change.
---
## Technologies & Libraries Used
- **React**: Hooks for state and effects.
- **Vite**: Fast development environment and build tool.
- **Material-UI**: For icons (`ContentCopyIcon`) and tooltip UI (`Tooltip`).
- **Tailwind CSS**: Utility-first CSS for styling.
---
## React Hooks Used
- `useState`
Manages component states such as:
- Password length (`length`)
- Generated password (`password`)
- Toggles for allowing numbers (`numberAllowed`) and special characters (`characterAllowed`)
- Tooltip text for copy button (`toolTipText`)
- `useEffect`
Triggers password regeneration whenever dependencies (`length`, `numberAllowed`, `characterAllowed`) change, ensuring the password stays updated with user preferences.
- `useRef`
References the password input field to programmatically select its content when copying to clipboard.
---
## Usage
1. Adjust the slider to select desired password length (0-36).
2. Toggle checkboxes to include numbers and/or special characters.
3. Copy the generated password using the copy button.
4. Use the password for your security needs!