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
Parameter | Type | Required | Default | Description |
---|---|---|---|---|
type | string | yes | N/A | A unique identifier for the registered component. |
label | string | yes | N/A | The label shown in the Makeswift builder. |
props | { [key: propName]: ControlDefinition } | yes | N/A | The label shown in the Makeswift builder. |
Valid control values for the props
parameter are the following: