Frontendx
README.md
SOLUTION.md
main.tsxentry
App.tsx
App.css
index.html
vite.config.ts
Installed
react@^19.2.0
react-dom@^19.2.0

Create a Lightbox Full-Screen Modal Image Gallery in React

Prompt

Build a lightbox component in React that shows images in a grid layout. When the user clicks an image, it opens in a full-screen overlay modal with the image centered and enlarged. Support navigating to the previous or next image using left/right arrow buttons or keyboard arrow keys. The modal should close on Escape key press or by clicking the dark backdrop. Implement focus trapping and use ReactDOM.createPortal for correct rendering outside the main DOM.

Use React.createPortal to render the modal outside the main DOM hierarchy to avoid z-index issues.
Test Results

Create a Lightbox Full-Screen Modal Image Gallery in React

Build a lightbox component in React that shows images in a grid layout. When the user clicks an image, it opens in a full-screen overlay modal with the image centered and enlarged. Support navigating to the previous or next image using left/right arrow buttons or keyboard arrow keys. The modal should close on Escape key press or by clicking the dark backdrop. Implement focus trapping and use ReactDOM.createPortal for correct rendering outside the main DOM.