`@stackflow/link`

It mimics the <Link /> component behavior provided by Gatsby (opens in a new tab) or Next.js (opens in a new tab).

Dependencies

It can be used only when both @stackflow/plugin-history-sync and @stackflow/plugin-preload are set.

Installation

npm install @stackflow/link

Usage

stackflow.ts

import { stackflow } from "@stackflow/react";
import { historySyncPlugin } from "@stackflow/plugin-history-sync";
import { preloadPlugin } from "@stackflow/plugin-preload";
 
const { Stack, useFlow, activities } = stackflow({
  activities: {
    // ...
  },
  plugins: [
    historySyncPlugin({
      //...
    }),
    preloadPlugin({
      // ...
    }),
    // ...
  ],
});
 
export type TypeActivities = typeof activities;

Link.tsx

import { createLinkComponent } from "@stackflow/link";
import type { TypeActivities } from "./stackflow";
 
export const { Link } = createLinkComponent<TypeActivities>();

MyComponent.tsx

import { Link } from './Link'
 
const MyComponent = () => {
  return (
    <div>
      <Link
        className={...}
        activityName="MyActivity"
        activityParams={{}}
      >
        {/* ... */}
      </Link>
    </div>
  )
}

Reference

Option	Type	Description
activityName	`string`	The name of the activity you want to link to. It's used to determine which route to navigate.
activityParams	`object`	Parameters to be passed to the activity. These parameters will be used to fill the route pattern.
animate	`boolean` (optional)	Indicates whether to animate the transition when navigating. If not provided, it defaults to no animation.
replace	`boolean` (optional)	If true, replaces the current entry in the history stack instead of pushing a new entry.
urlPatternOptions	`UrlPatternOptions` (optional)	Options to customize URL pattern matching and filling.
ref	`React.ForwardedRef<HTMLAnchorElement>` (optional)	A reference to the underlying anchor element, allowing direct DOM access if needed.
onClick	`function` (optional)	Function to handle the click event on the link. You can use it to perform additional actions on link clicks.
children	`React.ReactNode`	The content to be rendered inside the link. This is typically text or other elements the user can interact with.

API Pipelining plugin-basic-ui