Skip to main content
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
​
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();
  • useAppShellConfig() - Access only configuration (better performance)
  • useAppShellData() - Access only context data (better performance)

Build docs developers (and LLMs) love

Get started for freeTalk to us