Function: useFontContext()

@arolariu/website

---

@arolariu/website / contexts/FontContext / useFontContext

Function: useFontContext()

useFontContext(): FontContextValueType

Defined in: contexts/FontContext.tsx:353

Custom hook to consume font context with type-safe access.

Returns

FontContextValueType

Current font context value with font object and setter function

Remarks

Usage Requirements: Must be called within a FontContextProvider tree.

Why Client Component? This hook uses React 19's use() API which requires client-side execution.

Error Handling: Throws descriptive error if provider is missing, aiding debugging.

Return Value:

• font: Next.js font object with className and CSS variables
• fontType: Current selected font ("normal" or "dyslexic")
• fontClassName: Pre-computed className string
• setFont: Function to change font preference

Throws

When used outside FontContextProvider (context is undefined)

Examples

"use client";

function FontSwitcher() {
  const { fontType, setFont } = useFontContext();

  return (
    <button onClick={() => setFont(fontType === "normal" ? "dyslexic" : "normal")}>
      Switch to {fontType === "normal" ? "Dyslexic" : "Normal"} Font
    </button>
  );
}

// Apply font class to component
function StyledText() {
  const { fontClassName } = useFontContext();
  return <p className={fontClassName}>Styled with current font</p>;
}