Direct React rendering

Use InertiaXRenderer when your application supplies the table response directly, such as in a preview or test. For Laravel + Inertia pages, use the Inertia component.

Render a supplied envelope

import { InertiaXProvider, InertiaXRenderer } from '@inertiax/react';
import '@inertiax/react/styles.css';

export function Preview({ rawEnvelope }: { rawEnvelope: unknown }) {
  return (
    <InertiaXProvider>
      <InertiaXRenderer envelope={rawEnvelope} />
    </InertiaXProvider>
  );
}

An envelope is the complete serialized table response produced by Laravel. The renderer validates it and displays the built-in table. Theme, regions, events, and hooks work as described in React customization API.

Data updates

The direct renderer’s default in-memory integration updates state but returns the supplied rows. It does not query Laravel, write a URL, or recompute search, sorting, filtering, or pagination. Supply a new envelope when the preview data changes.

For server interactions through another host, InertiaXIntegrationRenderer accepts a TableIntegrationFactory from @inertiax/core. The factory owns the bridge to that host: initial data, dispatch, cancellation, result correlation, updates, and any location behavior. Laravel + React + Inertia is the tested full-stack integration; other hosts require your own implementation and verification.

Ownership and disposal

Surface	Owner
InertiaXProvider without runtime	Creates and disposes its runtime
InertiaXProvider runtime={runtime}	Caller owns the supplied runtime
InertiaXRenderer	Creates and disposes its session and memory integration
InertiaXIntegrationRenderer	Owns its session; caller owns the supplied integration factory and its resources
TableRenderer session={session}	Caller owns the supplied session

Dispose caller-owned resources when their owning application scope ends.

Validate input separately

The renderer already decodes its input. Use the protocol decoder if your integration needs to inspect a response before rendering:

import { decodeEnvelope, ProtocolDecodeError } from '@inertiax/protocol';

export function decodeForPreview(input: unknown) {
  try {
    return decodeEnvelope(input);
  } catch (error) {
    if (error instanceof ProtocolDecodeError) {
      console.error(error.code, error.path);
    }
    throw error;
  }
}

Declare @inertiax/core or @inertiax/protocol as a direct dependency when your own source imports it. Use versions compatible with the installed React package.

See Protocol reference for envelope validation and Registration & diagnostics for custom renderer fallbacks.