Installation

Installation

Install Stackflow in your React project with the following command.

npm install @stackflow/core @stackflow/react

Initialize Stackflow

Create a JavaScript (or TypeScript) file in your project and call the stackflow() function to generate the <Stack /> and useFlow() functions.

And export them so that <Stack /> and useFlow() can be used in other components.

import { stackflow } from "@stackflow/react";
 
export const { Stack, useFlow } = stackflow({
  transitionDuration: 350,
  activities: {},
  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";
 
export const { Stack, useFlow } = stackflow({
  transitionDuration: 350,
  activities: {},
  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;