marko/inertia-react

React companion for marko/inertia and marko/vite. It overlays the parent Inertia configuration with React defaults and registers a frontend marker binding so installing multiple Inertia frontend companions fails loudly.

Installation

composer require marko/inertia-react

Install the matching frontend dependencies in your app:

npm install @inertiajs/react react react-dom @vitejs/plugin-react vite

Refer to the Inertia.js docs for currently supported versions of each frontend adapter.

Configuration

This package contributes defaults to the parent config/inertia.php namespace:

packages/inertia-react/config/inertia.php

return [
    'assetEntry' => env('INERTIA_REACT_CLIENT_ENTRY', 'app/react-web/resources/js/app.jsx'),
];

Key	Purpose
assetEntry	Vite entry used by browser-rendered Inertia responses.

Usage

Render React-backed Inertia pages without passing an asset entry; marko/inertia reads it from configuration:

use Marko\Inertia\Inertia;
use Marko\Routing\Http\Request;
use Marko\Routing\Http\Response;

class DashboardController
{
    public function __construct(
        private readonly Inertia $inertia,
    ) {}

    public function index(Request $request): Response
    {
        return $this->inertia->render(
            request: $request,
            component: 'Dashboard',
        );
    }
}

Create the client entry at app/react-web/resources/js/app.jsx:

app/react-web/resources/js/app.jsx

import { createInertiaApp } from '@inertiajs/react';
import { createRoot } from 'react-dom/client';

createInertiaApp({
  resolve: (name) => {
    const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true });
    return pages[`./Pages/${name}.jsx`];
  },
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />);
  },
});

Create the SSR entry at app/react-web/resources/js/ssr.jsx:

app/react-web/resources/js/ssr.jsx

import { createInertiaApp } from '@inertiajs/react';
import createServer from '@inertiajs/react/server';
import ReactDOMServer from 'react-dom/server';

createServer((page) =>
  createInertiaApp({
    page,
    render: ReactDOMServer.renderToString,
    resolve: (name) => {
      const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true });
      return pages[`./Pages/${name}.jsx`];
    },
    setup: ({ App, props }) => <App {...props} />,
  }),
);

API Reference

This package registers Marko\Inertia\Frontend\InertiaFrontendInterface to a React marker implementation. Installing more than one Inertia frontend companion produces the same binding conflict protection used by Marko driver siblings.

Related Packages

• marko/inertia - renders Inertia responses and handles SSR fallback
• marko/vite - resolves the configured React Vite entry
• marko/env - provides the env() helper used in config/inertia.php