useAppShell

Hook to access the full AppShell context including configuration and dynamic data

React hook to access the full AppShell context, including both static configuration (title, icon, modules) and dynamic context data. For better performance, consider using useAppShellConfig() or useAppShellData() if you only need one or the other.

Signature

const useAppShell: () => {
  title?: string;
  icon?: ReactNode;
  configurations: RootConfiguration;
  contextData: ContextData;
}

Returns

title · string | undefined

App title passed to AppShell

icon · ReactNode | undefined

App icon passed to AppShell

configurations · RootConfiguration

Configuration object containing modules, settings resources, basePath, errorBoundary, and locale

Show properties

modules · Module[]

Array of registered modules

settingsResources · Resource[]

Resources that appear only in Settings menu

basePath · string | undefined

Base path for the application

errorBoundary · ReactNode

Error boundary component

locale · string

Current locale code (e.g., “en”, “ja”)

contextData · ContextData

Custom context data passed to AppShell. Type-safe when augmented via AppShellRegister

Usage

Basic Usage

import { useAppShell } from "@tailor-platform/app-shell";

const CustomComponent = () => {
  const { title, configurations, contextData } = useAppShell();
  
  return (
    <div>
      <h1>{title}</h1>
      <p>Locale: {configurations.locale}</p>
      <p>Modules: {configurations.modules.length}</p>
    </div>
  );
};

Accessing Context Data

import { useAppShell } from "@tailor-platform/app-shell";

const UserInfo = () => {
  const { contextData } = useAppShell();
  
  return (
    <div>
      <p>User: {contextData.currentUser?.name}</p>
      <p>Email: {contextData.currentUser?.email}</p>
    </div>
  );
};

Type-Safe Context Data

Define your context data type using TypeScript module augmentation:

// types/app-shell.d.ts
declare module "@tailor-platform/app-shell" {
  interface AppShellRegister {
    contextData: {
      apiClient: ApiClient;
      currentUser: User | null;
      featureFlags: Record<string, boolean>;
    };
  }
}

Then use it with full type safety:

import { useAppShell } from "@tailor-platform/app-shell";

function MyComponent() {
  const { contextData } = useAppShell();
  
  // contextData is fully typed
  const user = contextData.currentUser;
  const flags = contextData.featureFlags;
  
  return <div>Welcome, {user?.name}</div>;
}

Performance Considerations

This hook subscribes to both the config context and data context. If you only need configuration or only need context data, use the specialized hooks instead:

• Use useAppShellConfig() for static configuration only (title, icon, modules, basePath)
• Use useAppShellData() for dynamic context data only

This avoids unnecessary re-renders when only one context changes.

// Instead of this:
const { configurations } = useAppShell();

// Use this for better performance:
const { configurations } = useAppShellConfig();

Related Hooks

• useAppShellConfig() - Access only configuration (better performance)
• useAppShellData() - Access only context data (better performance)