HeaderProvider

React context provider for header data. Manages header state and provides header data to all child components.

Props

Usage

import { HeaderProvider } from '@/components/system/HeaderProvider';
import { createHeaderContextValue } from '@/lib/transform/headerUtils';
import { getHeader } from '@/lib/contentstack';

// In app/layout.tsx (SSR)
const header = await getHeader();
const headerContextValue = createHeaderContextValue(header);

<HeaderProvider initialValue={headerContextValue}>
  <Header />
</HeaderProvider>

Context Value

The context provides:

• header: Raw Header data from Contentstack
• headerData: Transformed HeaderData format
• utilityNavData: Utility navigation items
• announcementData: Announcement text, URL, and visibility
• showSearch: Whether to show search bar
• cslp: CSLP mapping for all header fields
• updateHeader: Function to update header (for preview mode)

Hook

import { useHeader } from '@/components/system/HeaderProvider';

function MyComponent() {
  const { headerData, announcementData, showSearch } = useHeader();
  // Use header data
}

Features

• SSR support: Initial value from server-side fetch
• CSR support: Can be updated client-side (for preview mode)
• Memoized: Context value is memoized to prevent unnecessary recalculations
• Type-safe: Full TypeScript support

Notes

• Must wrap Header component (done in root layout)
• Initial value comes from SSR fetch
• Preview mode updates header via updateHeader() function
• Context value recalculates only when header changes
• Used by Header component to access header data