Appearance

View as Markdown

usePageMeta ​

React hook to resolve page metadata (title, icon) from a route path.

Signature ​

typescript
const usePageMeta: (path: string) => {
  title: string;
  icon?: React.ReactNode;
} | null;

Parameters ​

path ​

  • Type: string
  • Required: Yes
  • Description: Route path to look up metadata for

Return Value ​

Returns an object with title and optional icon, or null when the path is external or does not match any AppShell route.

Usage ​

Resolve Title and Icon ​

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

function NavigationItem({ path }: { path: string }) {
  const meta = usePageMeta(path);

  if (!meta) {
    return null;
  }

  return (
    <div>
      {meta.icon}
      <span>{meta.title}</span>
    </div>
  );
}
typescript
function CustomLink({ to }: { to: string }) {
  const meta = usePageMeta(to);

  return (
    <a href={to}>
      {meta?.icon}
      {meta?.title || to}
    </a>
  );
}
typescript
function Breadcrumb({ paths }: { paths: string[] }) {
  return (
    <div>
      {paths.map((path) => {
        const meta = usePageMeta(path);
        return <span key={path}>{meta?.title}</span>;
      })}
    </div>
  );
}

Notes ​

  • Used internally by SidebarItem to auto-resolve titles and icons
  • Returns null for external URLs (http://... / https://...) and for paths that do not match any defined route
  • Resolves from module and resource meta properties
  • Prefers literal routes before dynamic siblings, so /users/new resolves that route's metadata instead of /users/:id