# `@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.

## Functions

### `ClientOnly`

```ts
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

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

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

### `useClient`

```ts
function useClient(): ReactServerClientContext;
```

A hook that returns the client context.

**Returns** — The client context

### `useOutlet`

```ts
function useOutlet(): ReactServerOutletContext;
```

A hook that returns the outlet context.

**Returns** — The outlet context

## Types

### `ReactServerClientContext`

```ts
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.

### `ReactServerOutletContext`

```ts
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.