Function: FontContextProvider()

@arolariu/website

---

@arolariu/website / contexts/FontContext / FontContextProvider

Function: FontContextProvider()

FontContextProvider(props): Element

Defined in: contexts/FontContext.tsx:149

Client Component providing application-wide font management with persistence.

Parameters

props

Readonly<{ children: React.ReactNode; }>

Component props

Returns

Element

Provider component wrapping children with font context

Remarks

Rendering Context: Client Component ("use client" directive required).

Why Client Component?

• Uses localStorage for preference persistence
• Listens to storage events for multi-tab synchronization
• Manipulates document.documentElement className
• Uses React hooks (useState, useEffect, useMemo)

State Management:

• Initializes from localStorage on mount
• Persists changes to localStorage on font switch
• Syncs across tabs via storage events

Performance:

• Memoized context value prevents unnecessary re-renders
• Safe font class application with deduplication
• Cleanup handlers prevent memory leaks

Font Application Safety:

1. Checks if font class already applied (no-op)
2. Removes only conflicting font classes
3. Applies new font class only if different

Example

// In root layout.tsx
<FontContextProvider>
  <Header />
  <main>{children}</main>
  <Footer />
</FontContextProvider>

See

useFontContext for consuming the context