Learn how to create a built-in accordion component that integrates with Makeswift.
div
element inside of index.tsx
.
Accordion.makeswift.tsx
file.
Here, we’ll reference the runtime
that was created during the installation step to call its registerComponent
function and pass the React component we just created as the first prop. Then, we’ll need to pass a configuration object with the following properties.
type
: serves as an identifier for the componentlabel
: shows up as its name in Makeswiftprops
: uses Makeswift controls to pass props to the React component. We’ll leave the props
empty for nowsrc/makeswift/components.tsx
file, a file created during the installation step.
Accordion
component in the Component Toolbar, which we can then drag into the Canvas.
Once we drag the component onto the Canvas, notice the label
we defined in the Accordion.makeswift.tsx
appears in the Properties Sidebar. Later, when we make the component editable in Makeswift, properties that can be edited will appear here.
index.tsx
file, update your Accordion
component to use the radix UI React accordion component. The example uses filler content for each accordion item. Each item has a title that triggers the expansion of its associated content.
accordions.map
to create an <Accordion.Item>
for each one:
index.tsx
file so that the component receives the accordions
prop. The accordions
prop should receive the title for each item from the Properties Sidebar as an array of strings.
accordions
prop to the component in the Accordion.makeswift.ts
file.
Let’s start by using the TextInput
control to define the prop. This makes the prop editable via a text field in Makeswift.
To use the control, we need to import it into the Accordion.makeswift.ts
file and then add it to the prop.
accordions
prop is receiving only one title from Makeswift. We’re passing the prop as a string from the TextInput
control, but we actually want the user to be able to add multiple accordion items, not just one.
To support this, we can add the List
control and put the title inside of it. Once you use the List
control to define the accordions
prop, the prop should receive an array of strings instead.
Accordion
component to receive input from Makeswift through the accordions
prop.
Once you refresh the page, you should be able to input accordion items and edit their titles in the Properties Sidebar after you click on the component.
index.tsx
file so that the component receives both a title
and content
property for each item in the accordions
prop.
accordions
prop in the Accordion.makeswift.ts
file so that it includes not just the title, but also the content, for each accordion item.
To support this, we can use the Group
control to define each accordion item as an object. The Group
control requires that you define the object properties, in our case, the title and content, as its own props. Once you use the Group
control, the prop should receive an array of objects instead.
Slot
control.
For convention, let’s also change the name of the prop to children
.
index.tsx
file to receive the children
prop.
children
prop is rendered inside of the content of the accordion, we need to expand the accordion to be able to access the slot:
Style
Control.
First, update the component in the index.tsx
file so that it receives the className
prop and use the class on the accordion component.
className
prop to the component in the Accordion.makeswift.ts
file. The prop should use the Style
control.
Style
control for the accordion content. We could also edit the font typography for text in the accordion content.