A responsive React application for generating customizable Lorem Ipsum placeholder text. Perfect for developers and designers who need quick dummy text for prototyping and testing applications. Built to practice React state management, component architecture, and modern CSS techniques.
View Live on Netlify:
Lorem Ipsum Text Generator Demo
- Provides instant access to customizable placeholder text for development
- Eliminates the need to search for external Lorem Ipsum generators
- Offers multiple text formats for different testing scenarios
- Includes one-click copy functionality for seamless workflow integration
- Saves valuable time during development and design prototyping phases
- Frontend developers needing placeholder content
- UI/UX designers creating mockups and prototypes
- Quality assurance testers generating test data
- Anyone requiring quick text content for application testing
- Multiple Text Formats - Generate paragraphs, sentences, or individual words
- Customizable Quantity - Dynamic input limits (1-9 paragraphs, 1-30 sentences/words)
- Copy to Clipboard - One-click copying with visual feedback animations
- Responsive Design - Optimized for all screen sizes and devices
- Loading States - Visual feedback during text generation
- Clean UI - Modern, accessible interface with smooth transitions
- Type-Specific Formatting - Proper punctuation and formatting for each text type
| 💻 Desktop View |
 |
| Desktop interface with form controls and generated text |
| 📱 Mobile View |
 |
| Mobile responsive view with optimized form controls |
| Tool / Library | Purpose |
|---|---|
| ⚡ Vite | Fast build tool & dev server |
| ⚛️ React 19 | Component-based UI |
| 🔑 Nanoid | Unique ID generation |
| 🎨 CSS3 | Flexbox, Grid, animations |
| 📋 Clipboard API | Copy functionality |
| 📜 JavaScript ES6+ | Modern language features |
- useState Hook - Managing count, text type, loading states, and UI states
- useEffect Hook - Side effects for cleaning text when changing types
- Custom Hooks Pattern - Organized state logic for maintainability
- Modular Components - Separated Form and CopyButton components
- Component Communication - Effective parent-child communication through props
- Conditional Rendering - Dynamic UI based on application state
- Reusable Utilities - Separate text generation logic in utils folder
- Form Validation - Input constraints and error prevention
- Visual Feedback - Animations and state indicators
- Accessibility - ARIA labels, keyboard navigation, and semantic HTML
- Performance - Optimized rendering with proper keys and efficient updates
Original Design Scope:
Basic paragraph generator based on course Figma design specifications.
Figma design provided by the course instructor.
View Original Figma Design
My Extensions & Enhancements:
- Multi-format Generation - Added sentences and word generation options
- Enhanced Functionality - Implemented copy-to-clipboard feature with visual feedback
- Advanced State Management - Complex state logic handling multiple text types and UI states
- Additional UI Components - Custom form controls and interactive elements
- Animation System - CSS animations and transitions for improved user experience
- Responsive Improvements - Enhanced mobile experience beyond original design
src/
├── components/
│ ├── Form.jsx
│ └── CopyTextButton.jsx
├── utils/
│ └── textGenerators.js
├── data.js
├── App.jsx
└── index.css
- Node.js ≥ 18.0.0
- npm or yarn package manager
- Clone the repository
git clone https://github.com/pro804/Lorem-Ipsum-Text-Generator.git- Navigate to the project directory
cd Lorem-Ipsum-Text-Generator- Install dependencies
npm install- Start the development server
npm run dev- Open http://localhost:5173 to view it in the browser.
npm run dev— Runs the development server (Vite)npm run build— Builds the app for productionnpm run preview— Previews the production build locally
This project was created for educational purposes as part of a React learning journey. The original design was provided by course materials, with extensions and enhancements implemented independently.
This project is licensed under the MIT License.See the LICENSE file for details.