This React-based interactive Meme Generator enables users to create custom memes by selecting from a variety of meme templates fetched dynamically from the Imgflip API.
Key Features:
- Dynamic Meme Templates: Fetches an array of meme templates from the Imgflip API as soon as the component mounts, storing them in state for quick access.
- Random Meme Selection: A button allows users to pick a random meme template from the fetched list. Upon selection, the meme image updates to the new template, the top text is set to the meme’s title, and the bottom text resets to empty.
- Controlled Inputs: The top and bottom text fields are controlled components, allowing real-time user input that instantly reflects on the meme image.
- Live Preview: Displays the meme image with overlaid top and bottom text, styled with impact font and outlined for readability.
- User Experience: The “Get a new meme image” button is disabled until meme templates are loaded, ensuring smooth interaction.
Technologies & Concepts:
- React functional components
- useState and useEffect hooks for state management and side effects
- Fetching and handling external API data
- Controlled form inputs for text editing
- Event handling and conditional rendering
- CSS styling for layout and meme text overlay
