A responsive and elegant React modal component that displays detailed information about a meal fetched from TheMealDB API .
- Fetches complete meal data using mealId
- Displays high-quality meal image
- Dynamically generates a clean ingredients list with measurements
- Shows full cooking instructions with preserved line breaks
- Includes direct link to YouTube tutorial (when available)
- Fully responsive modal built with Bootstrap 5
- Clean loading state and error handling
- Accessible close button and keyboard-friendly
- React (Hooks: useState, useEffect)
- Axios (for API calls)
- Bootstrap 5 (for styling and modal layout)
- TheMealDB API
The modal includes:
- Beautiful centered meal image
- Well-formatted ingredients list
- Readable instructions
- YouTube tutorial button
1- Make sure you have the required dependencies:
npm install axios bootstrap
2- Then import Bootstrap CSS in your index.js or App.js:
import "bootstrap/dist/css/bootstrap.min.css";
This component uses the free public API:
🔗 Free Recipe API: https://www.themealdb.com/api.php