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.

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

Where are these breakpoints in the Makeswift builder?

Examples

Basic usage

src/makeswift/runtime.ts

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

Custom breakpoints

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

makeswift/runtime.ts

1 import { ReactRuntime } from "@makeswift/runtime/react"
2 
3 export 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

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

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

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

1	import { ReactRuntime } from "@makeswift/runtime/react"
2
3	export 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	})