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.ts
import { stackflow } from "@stackflow/react";
import { basicUIPlugin } from "@stackflow/plugin-basic-ui";
 
const { Stack, useFlow } = stackflow({
  // ...
  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>
  );
};

appBar

OptionTypeDescription
backButton{ renderIcon?: () => ReactNode; ariaLabel?: string } | { 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