Client Only

The ClientOnly component allows to display content only on the client in JSX.

The ClientOnly component allows to render content only on the client/browser. This is useful when you want to render content that is not supported by the server (e.g. window or document).

import { ClientOnly } from '~/core/ui/If'; <ClientOnly> <div>Only rendered on the client</div> </ClientOnly>

An alternative to this component can be using the dynamic function from next/dynamic:

import dynamic from 'next/dynamic'; const DynamicComponent = dynamic(() => import('./DynamicComponent'), { ssr: false, });

If you're using Next.js, consider using the dynamic function instead of ClientOnly.

Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS