ClientOnly

Renders children in the browser only.

Renders children in the browser only. The server (and the first client pass, which must match the server's markup) renders fallback; once mounted, the children replace it. Use it for content that depends on browser state: window, localStorage, media queries, charts.

Import#

import { ClientOnly } from "@shadow-js/web";

Signature#

function ClientOnly(props: ClientOnlyProps): Accessor<unknown>

Parameters#

Name	Description
`props`	See ClientOnlyProps.

Returns#

An accessor of the current content: the fallback until mount, then the children.

Examples#

import { useSignal } from "@shadow-js/core";
import { ClientOnly } from "@shadow-js/web";

function Chart(props: { data: number[] }) {
  return <canvas data-points={props.data.length} />;
}

function Report() {
  const [rows] = useSignal([1, 2, 3]);
  return (
    <ClientOnly fallback={<p>Loading chart...</p>}>
      <Chart data={rows()} />
    </ClientOnly>
  );
}