`@stackflow/plugin-stack-depth-change`

This plugin is useful when you want to monitor the depth of the stack.

Installation

npm install @stackflow/plugin-stack-depth-change

Usage

stackflow.config.ts

import { defineConfig } from "@stackflow/config";
 
export const config = defineConfig({
  activities: [
    {
      name: "MyHome",
      route: "/",
    },
    {
      name: "MyArticle",
      route: "/articles/:articleId",
    },
  ],
});

stackflow.ts

import { stackflow } from "@stackflow/react";
import { stackDepthChangePlugin } from "@stackflow/plugin-stack-depth-change";
import { config } from "./stackflow.config";
import { MyHome } from "./MyHome";
import { MyArticle } from "./MyArticle";
 
const { Stack } = stackflow({
  config,
  components: {
    MyHome,
    MyArticle,
  },
  plugins: [
    // ...
    stackDepthChangePlugin({
      onInit: ({ depth, activities, activeActivities }) => {},
      onDepthChanged: ({ depth, activities, activeActivities }) => {},
    }),
  ],
});

Reference

`StackDepthChangePluginOptions`

Option	Type	Description
onInit	`(args: StackDepthChangePluginArgs) => void` (optional)	Callback function to be invoked during plugin initialization with the current stack depth and activities.
onDepthChanged	`(args: StackDepthChangePluginArgs) => void` (optional)	Callback function to be triggered whenever there is a change in the stack depth.

`StackDepthChangePluginArgs`

Option	Type	Description
depth	`number`	The current depth of the active activities stack.
activities	`Activity[]`	An array of all activities currently in the stack.
activeActivities	`Activity[]`	An array of activities that are active (either "exit-active" or "enter-done").

plugin-renderer-web