Recipe

Recipe: Date formatting per locale

Render dates that respect the user's locale without pulling in a heavy library. This recipe uses Intl.DateTimeFormat and a lightweight hook.

Ingredients

  • navigator.language for locale detection
  • Intl.DateTimeFormat built-in API
  • A small custom hook for SSR safety

Steps

  1. Create a useLocaleDate hook that reads navigator.language inside a useEffect.
  2. Accept a Date or ISO string and an optional options object.
  3. Call new Intl.DateTimeFormat(locale, options).format(date).
  4. Fall back to "en-US" during SSR to avoid hydration mismatches.
  5. Use the hook in any component that displays dates — timestamps, post dates, expiry labels.

Result

A single hook that formats dates in the user's locale with zero dependencies. German users see 31.12.2025, US users see 12/31/2025, and Japanese users see 2025/12/31 — all from the same component.

← All recipesNext recipe →