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;
};

Where are these breakpoints in the Makeswift builder?

Examples

Basic usage

src/makeswift/runtime.ts

import { ReactRuntime } from "@makeswift/runtime/next";

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/next";

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

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