Docs
Get Started
Getting State

Getting State

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

Figure 1. How a new activity is addedFigure 2. How an activity is removed

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.

OptionTypeDescription
activitiesActivity[]list of activites
transitionDurationnumbertransitionDuration value set in stackflow()
globalTransitionStateidle, loadingif 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.

OptionTypeDescription
idstringActivity ID
namestringRegistered activity name
transitionStateenter-active, enter-done, exit-active, exit-doneTransition state of the activity
paramsObjectParameters passed to the activity
isActivebooleanWhether is active activity (false when transitionState is exit-active)
isTopbooleanWhether is top activity (true when transitionState is exit-active)
isRootbooleanWhether 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.