Skip to navigation
ReferenceReactRuntime

constructor

The ReactRuntime is the bridge between Makeswift and your app. It tells the Makeswift builder about the schema of your components and which breakpoints to use.

Options

breakpoints
Record<string, Breakpoint>

An optional object with custom breakpoints for the Makeswift builder.

type Breakpoint = {
  // max width for the CSS media query
  width: number;
  // text displayed in the Makeswift builder
  label?: string;
  // Makeswift builder preview width
  viewport?: number;
};

Examples

Basic usage

src/makeswift/runtime.ts
import { ReactRuntime } from "@makeswift/runtime/react";
export const runtime = new ReactRuntime();

Custom breakpoints

The following example instantiates a new ReactRuntime with 4 custom breakpoints.

makeswift/runtime.ts
import { ReactRuntime } from "@makeswift/runtime/react"
export const runtime = new ReactRuntime({
  breakpoints: {
    mobile: { width: 575, viewport: 390, label: "Mobile" },
    tablet: { width: 768, viewport: 765, label: "Tablet" },
    laptop: { width: 1024, viewport: 1000, label: "Laptop" },
    external: { width: 1280, label: "External" },
  },
})

Changelog

VersionChanges
v0.27.0ReactRuntime import for Next.js has been moved from @makeswift/runtime/react to @makeswift/runtime/next