Reference@makeswift/runtimeReactRuntime

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.

1type Breakpoint = {
2  // max width for the CSS media query
3  width: number;
4  // text displayed in the Makeswift builder
5  label?: string;
6  // Makeswift builder preview width
7  viewport?: number;
8};

Examples

Basic usage

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

Custom breakpoints

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

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

Changelog

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