registerComponent

​

Arguments

1. component

   Component

   required

   Your component to be registered. This can be a React component or a function.

2. options

   object

   required

   Options for site version and locale.

   Show child attributes

   type

   string

   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.

   label

   string

   required

   The label shown in the Makeswift builder.

   icon

   Icon

   The icon shown in the Makeswift builder.

   props

   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.

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:

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. In the builder component tray, we can see our component with the selected icon.

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.

interface Props {
  className?: string
}

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

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

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.