Skip to main content

useCMSContext: Accessing Dynamic Page Data

Best Practices Guide for CMS Integration

Introduction​

The useCMSContext hook is the primary way to access the current page's metadata and content within an Archibald application. It provides a reactive link to the CMS data fetched during the routing phase.

How it works​

  1. Context Subscription: The hook connects to the global CMS context provider.
  2. Data Retrieval: It extracts the page object, which contains all the structured content from the CMS for the current URL.
  3. Reactivity: When the user navigates to a new page, the context is updated, and all components using this hook re-render with the new page data.

Why use useCMSContext?​

  • Deep Access: Access page-level data (like SEO titles, breadcrumbs, or header settings) from anywhere in your component tree without prop drilling.
  • Consistent Content: Ensures that all components are rendering data from the same source of truth.

See Also​

For a detailed technical breakdown and additional implementation patterns, refer to the following resources:

Key Takeaways​

  • Use it for "Global" Page Elements: Ideal for components like Breadcrumbs, Page Titles, or Sidebars that need data from the current page regardless of where they are placed.
  • Check for page presence: While usually available on CMS-routed pages, always ensure the page object exists before accessing its properties to avoid runtime errors.
  • Keep it Read-Only: Treat the data returned by useCMSContext as read-only. If you need to modify page-level state locally, use a separate useState hook.
  • Combine with usePreviewTicket: For editors, this hook works seamlessly with Archibald's preview system, showing draft content automatically.