The <MakeswiftComponent>
component takes a MakeswiftComponentSnapshot
(returned from calling getComponentSnapshot) and renders React elements using components registered with the runtime.
type
property that was used when calling
registerComponent.<Header>
component that is editable by the user and will be displayed on each page.
className
, logo
, and links
.
className
, logo
, and links
. Notice these property names match the property names defined in the Header
component.
registerComponent
the hidden
property is set to true
which hides it
from being listed in the Component Tray. This is because we will be
hard-coding where this component will be incorporated into the page and we
don’t want the user to drag and drop multiple instances of it.makeswift/components.ts
file with the rest of your components. If you don’t already have this file, refer to the App Router Installation guide to ensure it’s created and imported in the correct places.
getComponentSnapshot
with a unique ID and pass that snapshot to <MakeswiftComponent>
.
Here, we are adding the <Header>
to the root layout.tsx
file so that it shows up on each page.