<Flow>
is a generic wrapper that bootstraps all of the functionality of a Frigade Flow. We use it as the basis for building Flow-aware Components in our SDK, and we recommend it as the starting point when building your own custom components.
In this example, we will build a custom announcement component with an open source UI kit. We’ll use AnnouncementProps
and Flow
from @frigade/react
to get the data. We’ll use Sanity UI primarily to build the UI.
The final result looks like this:
Create a new Announcement Flow
Update the Flow YAML
Create a React component
@frigade/react
and @sanity/ui
to build the UI. Here are our imports:flowId
to connect the component to our Frigade Flow. Then we use the Announcement props such as step.title
, step.subtitle
, step.imageUri
, step.primaryButton.title
, and step.secondaryButton.title
to render the content where we like.We are using the Sanity UI Dialog
, Button
, Card
, and Flex
components to build the UI. Sanity doesn’t have a component for progress, so we can import the Progress
component from @frigade/react
to render optional progress indicators for the current page.
`Place the component in your product
AnnouncementWithFrigade
component in your product where you’d like the announcement to appear with the Flow ID
we generated in the first step. Here’s an example of how you might do that:You're done!