<ReactRuntimeProvider>

The <ReactRuntimeProvider> component takes a Makeswift runtime and provides it to the <Page> component for rendering snapshots.

Props

runtime
RuntimeRequired

A Makeswift runtime.

siteVersion
SiteVersionRequired

Determines which version of the site to render. If null is passed, then the published site content will be rendered.

children
React.Node

The children components to render.

locale
string

A valid locale string (ex. "en-US").

This is required if your site supports more than one locale.

Example

The following example shows how the <ReactRuntimeProvider> is used to implement the <MakeswiftProvider> client component as outlined in step 9 of the App Router Installation guide. The <MakeswiftProvider> is subsequently utilized in the App Router’s root layout.

1"use client";
2
3import { runtime } from "../../../../../makeswift/runtime";
4import { type SiteVersion } from "@makeswift/runtime/next";
5import {
6 ReactRuntimeProvider,
7 RootStyleRegistry,
8} from "@makeswift/runtime/next";
9import "../../../../../makeswift/components";
10
11export function MakeswiftProvider({
12 children,
13 siteVersion,
14}: {
15 children: React.ReactNode;
16 siteVersion: SiteVersion | null;
17}) {
18 return (
19 <ReactRuntimeProvider siteVersion={siteVersion} runtime={runtime}>
20 <RootStyleRegistry>{children}</RootStyleRegistry>
21 </ReactRuntimeProvider>
22 );
23}

Changelog

VersionChanges
v0.25.0Replace the previewMode boolean prop with siteVersion