Using Modal routes with Remix

[anubra266]

I'm trying to create modal routes in remix.
The approach I've tried is to put my modals in a nested route, this works but will prevent closing animations which is bad for UX.

[hollandThomas]

Does it technically need to be a route? i.e. do you want to have your app's modal-state as part of your browser's history so that browser-back navigates back to an once opened modal? Do you need a deep-link that lets you link to that particular modal?

Otherwise, have a look at implementations of the Dialog Design Pattern by e.g. Reach UI or Radix and use them as-is, without creating a new nested route.

[cliffordfajardo]

Does it technically need to be a route?

Its not necessary but there are advantages

Some pros of having a route modal

• you can share the URL and the modal will be opened and ready to use for the user
• you can use a loader and action in your modal component
• as soon as my modal route is activated, remix can fetch data for the modal. For example in my modal, I have lots of <Select> fields and their values need to be fetched from the backend
  • If you link to the modal route in my scenario above ^^ Remix can fetch all the data in parallel on the server so it may show up faster

[cliffordfajardo]

I ran into this same issue of my route not animating on the way out.
I created a simpler codesandbox demonstrating the problem of no exit animation when the route is switched:
https://codesandbox.io/s/antd-remix--modal-no-exit-transition-forked-bd6ckh

001-modal-no-exit-transition.mp4

Cross posting here for visibility; will update if find answer
#4092

[anubra266]

@cliffordfajardo I came up with this:
Basically all the code for the modal is in the page page, then the outlet is in the modal code, this way, the open and close transition is handled from the parent page, you can then pass an onClose method to the modal page through context, onClose should navigate back to parent of course.

[jamalsoueidan]

Works thanks 👍🏻

[Roanmh]

I recently implemented this solution and have two notes from my troubleshooting:

1. I repeated this solution, but with Shadcn/ui's Dialog. It worked but I needed @radix-ui/react-portal@1.1.1 (or later) to avoid a hydration error when the modal's route is loaded directly (via refresh or url entry).
2. I found that useLocation() also gave me the information I needed to determine if the dialog is open. The pathname of the location is more clear and more granular and, from what I can tell, useOutlet() is intended for internal use in react-router. useOutlet() worked just fine though.

[aon]

I've also implemented this solution with shadcn/ui. Two notes as well to improve the solution:

1. Solving the hydration error, as pointed out by @Roanmh, is just changing the following in the dialog.tsx component file:

import * as DialogPrimitive from "@radix-ui/react-dialog"
+import * as Portal from "@radix-ui/react-portal"

-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = Portal.Root

2. In order to prevent navigating away before finishing the animation, you can make use of the onCloseAutoFocus prop in DialogContent which gets triggered after finishing the animation.

[n1ghtmare]

Hey, I wrote a blog post about this. My version uses Framer Motion because that's what I use for animations across my project, but hey someone might find it useful.