Registering components

Registering React components is what makes them available in the Makeswift builder. The ReactRuntime.registerComponent function accepts a type to identify the component, a label to label it in the Makeswift builder, and props to define the controls.

import { ReactRuntime } from '@makeswift/runtime/react'

AnchorBreaking changes

AnchorType

When building visually in the Makeswift builder we save your component's data according to the registered component's type and props schema. What this means is that if the type changes, the component won't be recognized and you will see a "Component not found" error.

AnchorProps

If the props change in an incompatible way, this might cause runtime errors since the data that Makeswift will provide your component might not match what your component expects anymore.

We're actively working on building migration tools so that you can migrate component data. For now, it's a bit of a manual process where a component can be registered with a new type and then be visually replaced in the Makeswift builder. Once all instances of the old component have been replaced, the old component can be removed.

AnchorLocal development

When changing files that call registerComponent you've got to do a full refresh so that the changes can be registered. This is not necessary when changing the component source—it's only necessary when changing a file that calls registerComponent.

AnchorExamples

AnchorA simple box

In this example we register a Box component. We provide the value 'box' for type which must be unique and is how Makeswift knows to render the component. This value shouldn't change once the component has been used in the Makeswift builder. We also provide label, which will be shown in the Makeswift builder. For the props we use a Style to control the className prop.

import { ReactRuntime } from '@makeswift/runtime/react'
import { Style } from '@makeswift/runtime/controls'

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

ReactRuntime.registerComponent(Box, {
  type: 'box',
  label: 'Box',
  props: {
    className: Style({ properties: Style.All }),
  },
})

AnchorAPI

AnchorParameters

Valid control values for the props parameter are the following:

• Checkbox
• Number
• TextInput
• TextArea
• Select
• Color
• Image
• Combobox
• Shape
• List
• Style