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

Build a Functional Accessible Modal Dialog Component in React

easyreactmodalportalaccessibilityfocus trapanimationAmazonMetaAirbnbUI Component

Prompt

Create a reusable modal/dialog component in React that renders as a popup fixed in the center of the screen. The modal should open and close via props, dismiss when the user clicks the backdrop or presses the Escape key, and trap keyboard focus inside while open so tab navigation does not leave the modal. Support customizable Header, Body, and Footer sections. Use ReactDOM.createPortal to render it outside the main DOM tree. Add slide-in animation variants (top/bottom/left/right) as a bonus.

Use ReactDOM.createPortal to render the modal outside the root component hierarchy.
Test Results

Build a Functional Accessible Modal Dialog Component in React

Create a reusable modal/dialog component in React that renders as a popup fixed in the center of the screen. The modal should open and close via props, dismiss when the user clicks the backdrop or presses the Escape key, and trap keyboard focus inside while open so tab navigation does not leave the modal. Support customizable Header, Body, and Footer sections. Use ReactDOM.createPortal to render it outside the main DOM tree. Add slide-in animation variants (top/bottom/left/right) as a bonus.