The base route of a micro application. The internal routing of a micro application is based on this base route.

TypeScript type:

type base = string;


Query whether the specified user is authorized to operate the data point.

TypeScript type:

type PermissionCode = string;
type hasPermission = (code: PermissionCode) => boolean;

The value of PermissionCode is the code value of one of the items in privileges in the manifest file of each micro application.


Indicates whether this SaaS supports mobile app.

TypeScript type:

type isSupportMobile = boolean;


The static resource address.

TypeScript type:

type resourcePrefix = string;


Indicates the current language of the SaaS.

TypeScript type:

type tyLang = 'zh' | 'en';


Indicates the current region of the SaaS.

TypeScript type:

type region = 'tx' | 'us' | 'eu' | 'in' | 'ueaz' | 'we' | 'sea';


Fix the left-side selected menu by using the path field.

type modifySelectedMenu = (path: string) => void;


The main application supports the MQTT feature.

TypeScript type:

interface mqtt {
subscribeTopic: (
bizType: string,
cbFn: (msg: string) => void,
option: {
isGlobal: boolean;
) => void;
unsubscribeTopic: (bizType: string) => void;


The history object that the main application directly transmits to the micro application.

TypeScript type:

interface mainHistory {
push: (path: string, state?: any) => void;
replace: (path: string, state?: any) => void;
go: (n: number) => void;
goBack: () => void;
goForward: () => void;


Get the information about menus of the current micro application.

TypeScript type:

type getOwnMenu = () => {
authorized: any;
entry_id: string;
entry_name: string;
entry_name_en: string;
entry_name_lang_key: string;
entry_name_zh: string;
entry_type: string;
icon: string;
lang_package_biz_id: any;
micro_app_name: string;
oem_micro_app_id: string;
oem_saas_id: string;
parent_id: string;
path: string;
permission_code: string;
platform: string;
priority: number;
ratio: number;
sub_entry_list: any[];
tag_code: string;


Control the loading state of the visible window and breadcrumb of the current micro application.

TypeScript type:

type setLoading = (value: boolean) => void;


The API is a collection of APIs. Currently, only setBreadcrumb is available.

TypeScript type:

interface dynamicProps {
setBreadcrumb: SetBreadcrumb;


Render the common breadcrumb.

TypeScript type:

interface setBreadcrumb {
(breadcrumbInfos?: BreadcrumbInfoInput[]): void;
type BreadcrumbInfoInput =
| {
type: 'auto' | 'root';
name?: never;
path?: never;
| {
type: 'menu';
name?: never;
path: string;
| {
type: 'c';
name: string;
path: string;

For more information, see this document.


The node on which the current micro application is mounted.

TypeScript type:

type container = HTMLDivElement;


Transmit the raw data of Sentry's API methods to the micro application that can be used to capture error messages.

TypeScript type:

interface sentry {
captureEvent: (event: Event) => string;
captureMessage: (
message: string,
captureContext?: CaptureContext | Severity,
) => string;
captureException: (exception: any, captureContext?: CaptureContext) => string;


Get the theme color of the current SaaS. It is often used for micro applications that have charts configured.

TypeScript type:

typeof Theme = 'light' | 'dark';
interface ThemeSubscribe {
subscribe: (cb: (type: typeof THEME_TYPE, value: Theme) => void, callImmediately: boolean) => () => void;
getValue: () => Theme;
publish: (value: Theme) => void;

How to get started

import { useEffect, useState } from 'react';
import { MainProps } from 'src/index.ts';
function Test() {
const [theme, setTheme] = useState(() => MainProps.themeSubscribe.getValue());
useEffect(() => {
const unsubscribe = MainProps.themeSubscribe.subscribe(
(type, value) => {
true, // Notify immediately. The previous method will be requested immediately.
return unsubscribe;
}, [setTheme]);
return <div>Current theme color {theme}</div>;