API
Plugins
plugin-basic-ui

@stackflow/plugin-basic-ui

Render the UI within the activity using the global stack state. It provides cupertino and android themes by default.

Installation

npm install @stackflow/plugin-basic-ui

Usage

Provides components in the form of application app bars.

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 { basicUIPlugin } from "@stackflow/plugin-basic-ui";
import { config } from "./stackflow.config";
import { MyHome } from "./MyHome";
import { MyArticle } from "./MyArticle";
 
const { Stack } = stackflow({
  config,
  components: {
    MyHome,
    MyArticle,
  },
  plugins: [
    // ...
    basicUIPlugin({
      theme: "cupertino",
    }),
  ],
});

basicUIPlugin Options

OptionTypeDescription
themecupertino | androidSet the theme.
rootClassNamestring(optional)Set the root class name.
appBarAppBar(optional)Set the app bar.
AppScreen
import { AppScreen } from "@stackflow/plugin-basic-ui";
 
const Something = () => {
  return (
    <AppScreen appBar={{ title: "Home" }}>
      <div>Hello, World</div>
    </AppScreen>
  );
};

Safe Area

AppScreen automatically applies the device's left and right safe area insets to its content and app bar in both themes. The Cupertino title is centered within the safe area. Backgrounds and navigation transitions still span the full screen.

Include viewport-fit=cover in the viewport meta tag so the browser exposes the safe area insets.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

To extend media or other content to the screen edges, wrap it in a block element and cancel the insets with negative margins on the wrapper:

.full-bleed {
  margin-left: calc(-1 * env(safe-area-inset-left, 0px));
  margin-right: calc(-1 * env(safe-area-inset-right, 0px));
}

appBar

OptionTypeDescription
backButton{ renderIcon?: () => ReactNode; ariaLabel?: string; onClick?: (e) => void } | { render?: () => ReactNode }Set the back button.
closeButton{ renderIcon?: () => ReactNode; ariaLabel?: string; onClick?: (e) => void } | { render?: () => ReactNode }Set the close button.

It also provides modal and bottom sheet components.

Modal
import { Modal } from "@stackflow/plugin-basic-ui";
 
const Something = () => {
  return (
    <Modal>
      <div>Hello, World</div>
    </Modal>
  );
};
BottomSheet
import { BottomSheet } from "@stackflow/plugin-basic-ui";
 
const Something = () => {
  return (
    <BottomSheet>
      <div>Hello, World</div>
    </BottomSheet>
  );
};
linkplugin-devtools