yii2-extensions/inertia-react

React adapter helpers for inertia.

0.1.0 2026-04-16 13:11 UTC

Requires

• php: >=8.3
• yii2-extensions/inertia: ^0.1
• yiisoft/yii2: ^22.0@dev

Requires (Dev)

• infection/infection: ^0.32
• maglnet/composer-require-checker: ^4.1
• php-forge/coding-standard: ^0.1
• phpstan/extension-installer: ^1.4
• phpstan/phpstan-phpunit: ^2.0
• phpstan/phpstan-strict-rules: ^2.0.3
• phpunit/phpunit: ^11.5
• xepozz/internal-mocker: ^1.4
• yii2-extensions/phpstan: ^0.4

BSD-3-Clause

• react
• yii2
• SPA
• inertia
• vite

README

Inertia React

React adapter helpers for yii2-extensions/inertia
React-friendly root view and Vite asset integration for Yii2 Inertia applications

Features

Overview

yii2-extensions/inertia-react is a thin PHP-side adapter package for building React-based Inertia applications on top of yii2-extensions/inertia.

This package does not install npm dependencies for you. Instead, it provides.

• a React-specific bootstrap class for Yii2;
• a default root view that outputs Vite tags plus the initial Inertia page payload;
• a Vite helper component for development-server and manifest-driven production assets;
• React Refresh preamble output for @vitejs/plugin-react in development mode;
• documentation and conventions for the application-owned React client entrypoint.

Installation

composer require yii2-extensions/inertia-react:^0.1

Register the React bootstrap class.

return [
    'bootstrap' => [
        \yii\inertia\react\Bootstrap::class,
    ],
    'components' => [
        'inertiaReact' => [
            'class' => \yii\inertia\Vite::class,
            'baseUrl' => '@web/build',
            'devMode' => YII_ENV_DEV,
            'devServerUrl' => 'http://localhost:5173',
            'entrypoints' => [
                'resources/js/app.jsx',
            ],
            'manifestPath' => '@webroot/build/.vite/manifest.json',
            'preambleProvider' => \yii\inertia\react\Bootstrap::reactRefreshPreambleProvider(),
        ],
    ],
];

Use only yii\inertia\react\Bootstrap::class in the bootstrap list. It already delegates the base yii2-extensions/inertia bootstrap.

React client entrypoint

Install the client-side dependencies in your application project.

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

Then create your client entrypoint, for example resources/js/app.jsx:

import { createInertiaApp } from "@inertiajs/react";
import { createElement } from "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(createElement(App, props));
  },
});

Development mode and React Refresh

When devMode is true and preambleProvider is set to \yii\inertia\react\Bootstrap::reactRefreshPreambleProvider(), the Vite helper bypasses the production manifest and emits, in order: the React Refresh preamble, @vite/client, and each entrypoints script pointing at devServerUrl. Edits to .jsx files are hot reloaded without a full page refresh.

Run the Vite dev server and the Yii2 application side by side:

# Terminal 1 — Vite dev server
npm run dev

# Terminal 2 — Yii2 in dev mode
YII_ENV=dev ./yii serve

See Development Notes for the full HMR workflow, CORS notes, and troubleshooting.

Production asset integration

This package expects a Vite manifest file generated with build.manifest = true. In production it will render.

1. style sheet tags for the entrypoint chunk and its imported chunks;
2. module entry scripts for each entrypoint;
3. optional modulepreload tags for imported JavaScript chunks.

Documentation

For detailed configuration options and advanced usage.

• 📚 Installation Guide
• ⚙️ Configuration Reference
• 💡 Usage Examples
• 🧪 Testing Guide
• 🛠️ Development Notes

Package information

Quality code

License