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.

"use client"

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

export function MakeswiftProvider({ children }: { children: React.ReactNode }) {
  return (
    <ReactRuntimeProvider runtime={runtime}>
      <RootStyleRegistry>{children}</RootStyleRegistry>
    </ReactRuntimeProvider>
  )
}

Pages Router

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

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