<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.

children

React.Node

The children components to render.

Example

App Router

The following example shows the <ReactRuntimeProvider> being used in a Client Component and imported into the Root Layout in the app router.

Pages Router

The following example uses a Custom App to add the <ReactRuntimeProvider>.

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: { previewMode, locale, ...pageProps },
}: AppProps) {
  return (
    <ReactRuntimeProvider
      runtime={runtime}
      previewMode={previewMode}
      locale={locale}
    >
      <Component {...pageProps} />
    </ReactRuntimeProvider>
  );
}