HeaderProvider

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

Props

Prop	Type	Required	Default	Description
`initialValue`	`Omit<HeaderContextValue, 'updateHeader'>`	Yes	-	Initial header data from SSR
`children`	`ReactNode`	Yes	-	Child components

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>

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
}

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