ClientOnly

This component renders children only in the client environment and renders the fallback on the server. You can set an appropriate fallback to enhance the user experience as needed.

import { ClientOnly } from '@suspensive/react'
 
const Example = () => (
  <ClientOnly fallback={<>Loading...</>}>
    <div>This will only be rendered on the client side.</div>
  </ClientOnly>
)

ClientOnly.with

ClientOnly.with is a higher-order component (HOC) that wraps a component using ClientOnly. ClientOnly.with makes it easy to wrap a component.

import { ClientOnly } from '@suspensive/react'
 
const Example = ClientOnly.with({ fallback: <>server</> }, () => {
  return <>client</>
})