Learn how to create a built-in card component that integrates with Makeswift.
Card
component that can be used to display product data. This component will need a few different properties:
image
- the URL of the imagealt
- the alt text to use for the imageheading
- the heading textdescription
- the description textlink
- the link to navigate tolinkText
- the text of the linksrc/components/Card
directory and add an index.tsx
file. Then, define a type for the component props based on our requirements.
ReactRuntime
defined in src/makeswift/runtime.ts
.
When calling, registerComponent
, you’ll need to pass the React component to be registered as well as a config object with three required properties:
type
- a unique identifier for the componentlabel
- the label that shows up in the Visual Builderprops
- an object mapping of prop names to Makeswift controlstype
property is stored in the Makeswift database as a unique
identifier. This means that changing the type
property might cause side
effects. For example, if you already have an instance of this component in the
Canvas and then change the type
, Makeswift won’t recognize the original
component. In this case, you’ll see a “Component not found” message.icon
property in your configuration object to specify which icon to be displayed along side your component. In this example, we’ll use the image
icon.
Card
component. This is because we set props
to be an empty object. However, props
should be a mapping of properties to Makeswift controls that match the props the Card
component expects.
props
accordingly, this error will go away.
Note also that as we define each of these, we’ll need to import the appropriate control from @makeswift/runtime/controls
. We’ll skip this for now, but each import is included in the final registration code for your reference.
className
to the props
object with a value of Style()
. Notice that className
matches the name of the prop that our component is expecting. We’ll make sure to match this for each prop we define here.
Style
controls allows the user to edit the width and margin for a component.
properties
property like so:
image
property, we can use the Image control.
string
to the React component. However, it can also return an object that includes width and height properties like so:
format
property set to Image.Format.WithDimensions
.
Prop type
section
which defines the structure of the data that is passed to the registered React
component. For an example, refer to the Prop type
section of the Image control.heading
property, we can use the TextInput control.
defaultValue
here. Because the heading
prop in our Card
component is marked as required, we must provide the defaultValue
. In general, how you define your props in Makeswift should match the interface you’ve defined in your React component.
Let’s continue by adding two more TextInput
controls for alt
and linkText
. Again, we’ll set label
and defaultValue
for both.
description
, we want to allow the user to input a larger piece of text, so we can use the TextArea control.
link
prop.
Card
component which is an object that includes href
and target
properties.
layout.tsx
filesrc/makeswift/provider.tsx
filesrc/app/api/makeswift/[...makeswift].ts
src/makeswift/components.ts
file which is already imported into each of these three places. In this case, you can import your registration file here, and you’ll be good to go.