Installation

Installation

Install Stackflow in your React project with the following command.

npm install @stackflow/config @stackflow/core @stackflow/react

Create a Config File

Create a stackflow.config.ts file and define your activities using defineConfig().

import { defineConfig } from "@stackflow/config";
 
export const config = defineConfig({
  activities: [
    {
      name: "MyActivity",
    },
  ],
  transitionDuration: 350,
});

Initialize Stackflow

Create a JavaScript (or TypeScript) file in your project and call the stackflow() function, passing the config and activity components.

Export the result so that <Stack /> and useFlow() can be used in other components.

import { stackflow } from "@stackflow/react";
import { config } from "./stackflow.config";
import MyActivity from "./MyActivity";
 
export const { Stack, useFlow } = stackflow({
  config,
  components: {
    MyActivity,
  },
  plugins: [],
});

Installation

Stackflow does not include UI (DOM and CSS) implementation by default. To achieve the desired rendering results, you need to add plugins. Install the @stackflow/plugin-renderer-basic plugin and the @stackflow/plugin-basic-ui extension with the following command.

npm install @stackflow/plugin-renderer-basic @stackflow/plugin-basic-ui

Initialize UI Plugins

Initialize the basicRendererPlugin() from @stackflow/plugin-renderer-basic and the basicUIPlugin() from @stackflow/plugin-basic-ui in the plugins field of the stackflow() function as follows.

import { stackflow } from "@stackflow/react";
import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
import { basicUIPlugin } from "@stackflow/plugin-basic-ui";
import { config } from "./stackflow.config";
import MyActivity from "./MyActivity";
 
export const { Stack, useFlow } = stackflow({
  config,
  components: {
    MyActivity,
  },
  plugins: [
    basicRendererPlugin(),
    basicUIPlugin({
      theme: "cupertino",
    }),
  ],
});

Include CSS

Also, include the CSS provided by @stackflow/plugin-basic-ui somewhere in your code.

import "@stackflow/plugin-basic-ui/index.css";

Render the Stack Component

And initialize the <Stack /> component at the desired rendering location as follows.

import { Stack } from "./stackflow";
 
const App = () => {
  return (
    <div>
      <Stack />
    </div>
  );
};
 
export default App;