Skip to Content
UI ProtocolAppShellHooks

Hooks

Hooks to manage the state and interactions between the main application shell and micro frontend applications

useAppShell Hook

Provides a context for managing the state and interactions between the main application shell and micro frontend applications.

import { useAppShell } from '@akinon/app-shell';
 
const App = () => {
  const { apps, configs, navigate } = useAppShell();
 
  ...
};
 
export default App;

The return value of the useAppShell hook is of type AppShellContextState.

Type

/**
 * Defines the shape of the context state used by the AppShellProvider.
 *
 * @typedef {Object} AppShellContextState
 * @property {RegisteredApp[]} apps - The list of registered micro frontend applications.
 * @property {Map<number, PluginApplicationConfig | FullpageApplicationConfig>} configs - Stores configuration for each registered app.
 * @property {(payload: ApplicationNavigationPayload) => void} navigate - Provides a mechanism for navigating within the main application.
 * @property {React.MutableRefObject<Map<number, HTMLIFrameElement>>} frames - Optional. References to iframe elements for each micro frontend.
 * @property {React.MutableRefObject<Map<number | UUID, Framebus>>} buses - Optional. Framebus instances for each registered app.
 * @property {Map<UUID, number | UUID>} modals - Optional. UUID values for defined rich modals.
 * @property {Map<UUID, unknown>} modalContext - Optional. Context data for a modal.
 */
interface AppShellContextState {
  apps: RegisteredApp[];
  configs: Map<
    number | UUID,
    PluginApplicationConfig | FullpageApplicationConfig
  >;
  navigate: (payload: ApplicationNavigationPayload) => void;
  frames?: React.MutableRefObject<Map<number | UUID, HTMLIFrameElement>>;
  buses?: React.MutableRefObject<Map<number | UUID, Framebus>>;
  modals?: Map<UUID, number | UUID>;
  modalContext?: Map<UUID, unknown>;
}
i18nComponents