Sergio Xalambrí

remix-utils@7.0.0
View as Markdown

Tutorial

Use React Portal in Remix

Because React Portals needs an actual DOM element where to be attached, we can't just use them in a Remix app because when doing Server-Side Rendering it will fail since there's no DOM.

We can solve this by using Remix Utils' ClientOnly.

// app/routes/something.tsx
import { ClientOnly } from "remix-utils/client-only"; export default function Component() { return ( <ClientOnly> {() => createPortal(<Modal />, document.getElementById('modal-portal')} </ClientOnly> ) }

With this we'll delay the rendering to the Modal inside a Portal until hydration happens client-side.

Do you like my content?

Your sponsorship helps me create more tutorials, articles, and open-source tools.

Sponsor me on GitHub