@lazarv/react-server/client

Client-side runtime helpers. Exposes the client and outlet contexts used by navigation, refresh, and prefetching, plus the ClientOnly component for code that must only run after hydration.

function ClientOnly(props: React.PropsWithChildren): React.JSX.Element;

A component that renders its children only on the client after hydration.

Parameters

• props — The props for the component

Returns — The component

import { ClientOnly } from '@lazarv/react-server/client';

export default function App() {
 return (
  <ClientOnly>
   <h1>Client-only content</h1>
  </ClientOnly>
 );
}

function useClient(): ReactServerClientContext;

A hook that returns the client context.

Returns — The client context

function useOutlet(): ReactServerOutletContext;

A hook that returns the outlet context.

Returns — The outlet context

type ReactServerClientContext = {
    registerOutlet(outlet: string, url: string): void;
    refresh(outlet?: string, options?: {
        signal?: AbortSignal;
        fallback?: React.ReactNode;
        Component?: React.ReactNode;
    }): Promise<void>;
    prefetch(url: string, options?: {
        outlet?: string;
        ttl?: number;
        signal?: AbortSignal;
    }): Promise<void>;
    navigate(url: string, options?: {
        outlet?: string;
        push?: boolean;
        rollback?: number;
        signal?: AbortSignal;
        fallback?: React.ReactNode;
        Component?: React.ReactNode;
    }): Promise<void>;
    replace(url: string, options?: {
        outlet?: string;
        rollback?: number;
        signal?: AbortSignal;
        fallback?: React.ReactNode;
        Component?: React.ReactNode;
    }): Promise<void>;
    abort(outlet?: string, reason?: unknown): void;
    subscribe(url: string, listener: (to: string, done?: (err: unknown | null, result: unknown) => void) => void): () => void;
    getFlightResponse(url: string, options?: {
        outlet?: string;
    }): Promise<React.ReactNode | null>;
};

The client context.

type ReactServerOutletContext = {
    refresh: (options?: Parameters<ReactServerClientContext["refresh"]>[1]) => Promise<void>;
    prefetch: (url: string, options?: Parameters<ReactServerClientContext["prefetch"]>[1]) => Promise<void>;
    navigate: (to: string, options?: Parameters<ReactServerClientContext["navigate"]>[1]) => Promise<void>;
    replace: (to: string, options?: Parameters<ReactServerClientContext["replace"]>[1]) => Promise<void>;
    abort: (reason?: string) => void;
};

The outlet context.