React Islands#

Only where a rich UI is needed, you can mount a client React component as an "island" (an escape hatch).

<?php
use Polidog\Relayer\React\Island;

return fn () => (
    <section>
        <h1>Dashboard</h1>
        {Island::mount('Chart', ['points' => $data])}
    </section>
);

The framework emits a placeholder like the following.

<div data-react-island="Chart" data-react-props='…'></div>

You register the component in a client-side JS bundle (build it yourself with vite / esbuild or similar).

import Chart from './islands/Chart';

window.relayerIslands.register('Chart', (el, props) => {
    createRoot(el).render(<Chart {...props} />);
});

The loader is added to the document only once.

$document->addHeadHtml(Island::loaderScript($nonce));
$document->addHeadHtml('<script type="module" src="/islands.js"></script>');

• There is no SSR (islands render on the client only).
• Communication between an island and the server is done with a fetch to

your own route.php.

• Preparing the bundle is the user's responsibility. The framework does

not add a Node build.

This documentation site does not use islands and is composed of server-rendering only (search too is completed on the server side via route.php / pages).