<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

App Router

Pages Router

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 
3 import { runtime } from "../../../../../makeswift/runtime";
4 import { type SiteVersion } from "@makeswift/runtime/next";
5 import {
6   ReactRuntimeProvider,
7   RootStyleRegistry,
8 } from "@makeswift/runtime/next";
9 import "../../../../../makeswift/components";
10 
11 export 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

Version	Changes
`v0.25.0`	Replace the `previewMode` boolean prop with `siteVersion`

1	"use client";
2
3	import { runtime } from "../../../../../makeswift/runtime";
4	import { type SiteVersion } from "@makeswift/runtime/next";
5	import {
6	ReactRuntimeProvider,
7	RootStyleRegistry,
8	} from "@makeswift/runtime/next";
9	import "../../../../../makeswift/components";
10
11	export 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	}