Changelog

Link component

<FlowsProvider /> now accepts a LinkComponent prop. Pass your app's router Link component to enable client-side navigation in components from @flows/react-components. Without it, each link click causes a full page reload. This keeps navigation fast and consistent with the rest of your app.

See the React SDK reference for usage details.

1import { Link } from "react-router";
2import { LinkComponentType } from "@flows/react";
3
4// Adapt "react-router" Link to Flows LinkComponentType
5const LinkComponent: LinkComponentType = ({ href, children, className, onClick }) => (
6  <Link to={href} className={className} onClick={onClick}>
7    {children}
8  </Link>
9)
10
11// Pass the LinkComponent to FlowsProvider
12<FlowsProvider
13  // Other props...
14  LinkComponent={LinkComponent}
15/>

1import { Link } from "react-router";
2import { LinkComponentType } from "@flows/react";
3
4// Adapt "react-router" Link to Flows LinkComponentType
5const LinkComponent: LinkComponentType = ({ href, children, className, onClick }) => (
6  <Link to={href} className={className} onClick={onClick}>
7    {children}
8  </Link>
9)
10
11// Pass the LinkComponent to FlowsProvider
12<FlowsProvider
13  // Other props...
14  LinkComponent={LinkComponent}
15/>

Floating checklist controls

Two new options give you more control over floating checklist popup behavior during user interactions. You can now hide the popup when a checklist item's button is clicked, hiding the list to pull focus towards the task. You can also configure the popup to reopen automatically when an item is completed, so users see their updated progress without having to re-open it manually.

These work well together for flows where each checklist item launches a tour or navigates the user to a specific part of your product.

Other improvements

• Added a Solid.js integration guide with step-by-step setup instructions for both Solid and SolidStart.