Optimized for: Gemini / ChatGPT / Claude
Advanced AI Prompt for Persistent State Modals in SPAs
Use this engineered prompt to drastically optimize your workflow and output.
Required Variables
- ✦
[URL_QUERY_PARAM] - ✦
[BROWSER_HISTORY_ACTION] - ✦
[SYNC_LOGIC]
radix-persistent-state-modal.txt
Develop a Radix UI Dialog that synchronizes its 'open' state with a [URL_QUERY_PARAM] in a Single Page Application (SPA). Use [BROWSER_HISTORY_ACTION] (Push vs Replace) to allow users to navigate back to close the modal. Implement [SYNC_LOGIC] to handle cases where the user shares a URL with the modal already open. Address the accessibility concern of 'Initial Focus' when a modal is opened automatically on page load. Provide the implementation using React Router or Next.js Navigation hooks.
Example Output
"The AI generates a wrapper that monitors the URL search params, automatically opening or closing the Radix Dialog and managing focus accordingly."