How toUse 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.

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.