registerComponent

Arguments

Component
required
Your component to be registered. This can be a React component or a function.
object
required
Options for site version and locale.
Show child attributes

string
required
A unique string that identifies the component for Makeswift to render. Don’t change the type once you use the component in the Makeswift builder.
If this value changes after you use the component in the Makeswift builder, the component will appear as a “Component not found” block. To fix this, restore the type to the original value, or delete this component and re-add add it to the page.

string
required
The label shown in the Makeswift builder.

Icon
The icon shown in the Makeswift builder. You can find all available icons in the icons list section.

boolean
A boolean that determines whether or not this component will be displayed in the Component Tray.

Record<string, Control>
required
An object mapping prop names to Makeswift controls.

Examples

Registering a box

This example shows how to register a Box component. 'box' is the value for type, which must be unique, as Makeswift uses this value to identify the component. This value shouldn’t change once you use the component in the Makeswift builder. 'Box' is the label, which appears in the Makeswift builder. The example applies a Style control to the className prop.

makeswift/components.tsx

import { Style } from "@makeswift/runtime/controls";

import { runtime } from "./runtime";

function Box({ className }) {
  return <div className={className}>I'm a box!</div>;
}

runtime.registerComponent(Box, {
  type: "box",
  label: "Box",
  props: {
    className: Style({ properties: Style.All }),
  },
});

Creating sections

This example shows how to register a Cube and a Sphere component under a “Visuals” section. In each components’ label, use slashes to separate the section name and component name. In the Makeswift builder, both components appear under the same Visuals collapsible section:

Screenshot of registered component sections

makeswift/components.tsx

import { Style } from "@makeswift/runtime/controls";

function Cube({ className }) {
  return <div className={className}>Cube!</div>;
}

function Sphere({ className }) {
  return <div className={className}>Sphere!</div>;
}

runtime.registerComponent(Cube, {
  type: "cube",
  label: "Visuals/Cube",
  props: {
    className: Style({ properties: Style.All }),
  },
});

runtime.registerComponent(Sphere, {
  type: "sphere",
  label: "Visuals/Sphere",
  props: {
    className: Style({ properties: Style.All }),
  },
});

Adding custom icons

This example shows how to register an ImageGallery component with a custom icon. We import ComponentIcon from @makeswift/runtime and pass ComponentIcon.Gallery as the icon for our component.

You can find all available icons in the icons list section.

In the builder component tray, we can see our component with the selected icon.

makeswift/components.tsx

import { Style } from "@makeswift/runtime/controls";
import { ComponentIcon } from "@makeswift/runtime";

import { runtime } from "./runtime";

function ImageGallery({ className }) {
  return <div className={className}>I'm an image gallery!</div>;
}

runtime.registerComponent(Cube, {
  type: "image-galley",
  label: "ImageGallery",
  icon: ComponentIcon.Gallery,
  props: {
    className: Style({ properties: Style.All }),
  },
});

Organizing registration code

As you register more components in makeswift/components.tsx, you may notice this file growing rather large. To keep your codebase organized, we recommend breaking out your Makeswift registration code into separate files and co-locating it with your component file. For example, if you have a Box component, you can create a Box.makeswift.ts file next to your Box.tsx file. This file will contain the registration code for the Box component.

Makeswift does not rely on this naming convention. Feel free to use whatever naming convention you prefer.

interface Props {
  className?: string;
}

function Box({ className }) {
  return <div className={className}>I'm a box!</div>;
}

import { Style } from "@makeswift/runtime/controls";

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

import { Box } from "./Box";

runtime.registerComponent(Box, {
  type: "box",
  label: "Box",
  props: {
    className: Style({ properties: Style.All }),
  },
});

Then update your makeswift/components.tsx file to import all of the component registrations, like so:

makeswift/components.ts

import "@/components/Box/Box.makeswift";
import "@/components/Cube/Cube.makeswift";
import "@/components/Sphere/Sphere.makeswift";
/*
 * Add all of your component registrations here
 */

The file makeswift/components.ts should be imported wherever you use <ReactRuntimeProvider> in your app.

Icons List

Here is the list of available icons to use when registering your component.

Get started

Guides

Reference

Integrations

Arguments

Examples

Registering a box

Creating sections

Adding custom icons

Organizing registration code

Icons List

​Arguments

​Examples

​Registering a box

​Creating sections

​Adding custom icons

​Organizing registration code

​Icons List

Arguments

Examples

Registering a box

Creating sections

Adding custom icons

Organizing registration code

Icons List