Using Custom Components in Collections
Collections allow you to deploy Flows without having to manually embed them in your app code, which is great! Who doesn’t love no-code deploys? But you may be asking “How do I use Custom Components if I’m not rendering React components directly?” Great question, let’s dig in to how to use Custom Components in Collections.
To start, let’s get a Collection set up with a Custom Flow in it:
Create a "Macguffins" Collection
In the Frigade web app, Create a Collection named “Macguffins”.
Create a new Custom Flow
- In the top nav bar, click the “Create” button and select “Custom” from the list of available Flow types.
- Use the three dot menu to rename your flow to “The Rug”
- In the Advanced Flow editor, replace the default YAML with the following:
type: macguffin
title: The Rug
subtitle: It really ties the room together.
owner: The Dude
Add your Flow to the Macguffins Collection
- Select “Collections” in the left nav bar
- Click “Macguffins” from the list of Collections
- Click “Add Flows” and select “The Rug”
- Click “Save Collection” (or press CMD+S)
Embed the Macguffins Collection in your app
- Click “In-App Channel” to show the embed code for your Collection
- Paste the embed code into your app
Great! Excellent job so far, you should now have a Collection in your app that does absolutely nothing. But this is a good thing! You’ve defined a Flow with a type: macguffin
that’s unknown to Frigade — we don’t have a built-in Component in the SDK that matches that Flow type, so there’s nothing to render yet.
Let’s fix that by wiring up a new <Macguffin>
Component and registering it with the Frigade <Provider>
so that we know how to render Flows with type: macguffin
.
Create a Macguffin Component
Paste the following code into Macguffin.tsx
import { Flow, type FlowProps } from '@frigade/react';
export function Macguffin(props: FlowProps) {
return (
<Flow {...props}>
{({ flow }) => {
<h3>{flow.title}</h3>
<p>{flow.subtitle}</p>
<p>{flow.owner}</p>
}}
</Flow>
)
}
Pass your Component into the Provider
Add the flowTypes
prop to <Frigade.Provider>
to map your new <Macguffin>
Component to the macguffin
Flow type
import * as Frigade from '@frigade/react';
import { Macguffin } from 'Macguffin.tsx'
export function App() {
return (
<Frigade.Provider apiKey="..." flowTypes={{
macguffin: Macguffin
}}>
{/* ... */}
</Frigade.Provider>
)
}
That’s it, you’re done. You should now see your <Macguffin>
rendering the contents of your Flow. Now that you have it set up, you can deploy any Flow with type: macguffin
to any Collection.