Getting State

The internal state of Stackflow can be described in one word: a stack data structure with transition states.

The activities accessible through the activities field contain information related to their basic existence, such as ID, name, and the current transition state. These state values are utilized in various ways to create the @stackflow/plugin-basic-ui. (You can create one too!)

Utilizing Stack State in Rendering

To access the stack state in a UI component, use the useStack() hook.

MyActivity.tsx

import { ActivityComponentType, useStack } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";
 
const MyActivity: ActivityComponentType = () => {
  const stack = useStack();
  const { replace } = useFlow();
 
  const onClick = () => {
    replace("Article", {
      title: "Hello",
    });
  };
 
  useEffect(() => {
    console.log("Stacked Activities:", stack.activities);
    console.log("Current Transition State:", stack.globalTransitionState);
    console.log(
      "Initial Transition Duration Options",
      stack.transitionDuration,
    );
  }, [stack]);
 
  return (
    <AppScreen appBar={{ title: "My Activity" }}>
      <div>
        My Activity
        <button onClick={onClick}>Go to article page</button>
      </div>
    </AppScreen>
  );
};
 
export default MyActivity;

There are the following fields in the stack state.

Option	Type	Description
activities	`Activity[]`	list of activites
transitionDuration	`number`	`transitionDuration` value set in `stackflow()`
globalTransitionState	`idle`, `loading`	if current activity is animating or not

Utilizing Activity State in Rendering

You can use the useActivity() hook to get information about the current activity.

MyActivity.tsx

import { ActivityComponentType, useActivity } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";
 
const MyActivity: ActivityComponentType = () => {
  const activity = useActivity();
  const { replace } = useFlow();
 
  const onClick = () => {
    replace("Article", {
      title: "Hello",
    });
  };
 
  useEffect(() => {
    console.log("Transition State of Current Activity:", activity.transitionState);
  }, [activity]);
 
  return (
    <AppScreen appBar={{ title: "My Activity" }}>
      <div>
        My Activity
        <button onClick={onClick}>Go to article page</button>
      </div>
    </AppScreen>
  );
};
 
export default MyActivity;

The fields in the activity state are as follows.

Option	Type	Description
id	`string`	Activity ID
name	`string`	Registered activity name
transitionState	`enter-active`, `enter-done`, `exit-active`, `exit-done`	Transition state of the activity
params	`Object`	Parameters passed to the activity
isActive	`boolean`	Whether is active activity (`false` when `transitionState` is `exit-active`)
isTop	`boolean`	Whether is top activity (`true` when `transitionState` is `exit-active`)
isRoot	`boolean`	Whether is root activity

Customize UI

You can freely customize the UI by using states such as useActivity() and useStack() in the desired component.

If you want to utilize the UI provided by @stackflow/plugin-basic-ui, use the provided AppScreen component.

Do you want to extend the UI or logic and share it with other developers? Let's move on to learn how to create a plugin.

Navigating Step Writing Your Own Plugin