@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.

import { defineConfig } from "@stackflow/config";
 
export const config = defineConfig({
  activities: [
    {
      name: "MyHome",
      route: "/",
    },
    {
      name: "MyArticle",
      route: "/articles/:articleId",
    },
  ],
});

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

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.

Modal is centered within the area remaining after the top, right, bottom, and left safe area insets are excluded. Its existing 2.5rem horizontal margins and maxWidth still apply within that area, while the dimmed backdrop covers the full screen.

BottomSheet keeps its background at the bottom of the screen and spans the full width. It applies the left, right, and bottom safe area insets as internal padding, in addition to any padding on its children. It does not apply the top inset.

If children already apply safe area insets, remove only the adjustments duplicated by the component: all four sides for Modal, and the left, right, and bottom for BottomSheet. Keep any regular content padding and any existing top inset handling in BottomSheet children.

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

It also provides modal and bottom sheet components.

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

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