useFlow
hook sits one layer deeper in the React SDK than the Flow Component and serves as the connection between our vanilla JS data layer and React Components.
In most cases, you’ll want to use <Flow>
over useFlow
, but if you need a deeper level of control over the lifecycle and behavior of a Flow, or if you need access to a Flow outside of a Component, this hook is for you.
In this example, we’ll build a Progress Badge using the useFlow hook for the data layer.
Additionally, we’ll leverage a series of prebuilt Frigade component primitives such as <Box>
to build the UI.
The final result looks like this:
A custom built progress badge
useFlow
hook. We’ll then use the hook to get the flow data and calculate the number of steps completed and the total number of steps:
flow
object, see the Flow API Reference.
Now, all we have left to do is to build the UI. We’ll use the Box
and Text
components from the Frigade React SDK to build the UI. We’ll also use the IconRender
component to render the ChevronRight icon from the lucide-react
package: