​
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

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" },
  },
})

Was this page helpful?

MakeswiftApiHandlerregisterComponent