<ReactRuntimeProvider>

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

Props

runtime · Runtime · required

A Makeswift runtime.

siteVersion · SiteVersion · required

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

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.

src/makeswift/provider.tsx

"use client";

import { runtime } from "@/makeswift/runtime";
import { type SiteVersion } from "@makeswift/runtime/next";
import {
  ReactRuntimeProvider,
  RootStyleRegistry,
} from "@makeswift/runtime/next";
import "@/makeswift/components";

export function MakeswiftProvider({
  children,
  siteVersion,
}: {
  children: React.ReactNode;
  siteVersion: SiteVersion | null;
}) {
  return (
    <ReactRuntimeProvider siteVersion={siteVersion} runtime={runtime}>
      <RootStyleRegistry>{children}</RootStyleRegistry>
    </ReactRuntimeProvider>
  );
}

Pages Router

The following example shows how to add a <ReactRuntimeProvider> to a Custom App as outlined in step 10 of the Pages Router Installation guide. The siteVersion property is returned from getStaticProps in an optional catch-all route.

src/pages/_app.tsx

import type { AppProps } from "next/app";
import { ReactRuntimeProvider } from "@makeswift/runtime/next";

import { runtime } from "@/makeswift/runtime";
import "@/makeswift/components";

export default function App({
  Component,
  pageProps: { siteVersion, ...pageProps },
}: AppProps) {
  return (
    <ReactRuntimeProvider runtime={runtime} siteVersion={siteVersion}>
      <Component {...pageProps} />
    </ReactRuntimeProvider>
  );
}

Changelog

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