Now that you understand the structure of Makeswift-enabled components, review the following common steps to consider when converting any React component to be compatible with the visual editor.
To serve as an effective building block in the visual editor, a piece of presentation needs to have a single component as its “entry point.”
If using your React UI requires implementors directly to use multiple components, such as an Accordion component in combination with AccordionItem components, you might consider wrapping this in a component that orchestrates these together based on a single set of props.
Your UI may be split into multiple components internally, but the “top level” implementation should be a single component with props.
Evaluate the types and schema of your component’s props to make sure they can map well to available Makeswift controls.
Create the registration file for your component, calling runtime.registerComponent with the appropriate configuration.
In the location where component registrations are imported, add the import of your own component.
By default, new imports should be added in lib/makeswift/components.ts.
For each prop that your component accepts, identify the appropriate Makeswift control type and add an item to the props object in the registration file.
The key of each item in props should exactly match the prop from the React component, and the value should be a new instance of a control type, with any appropriate configuration options.