Language Provider Component

A component that sets the HTML lang attribute based on the current route.

Sets the HTML lang attribute.

Installation

pnpm dlx shadcn@latest add https://ui.vllnt.com/r/lang-provider.json

bash

Usage

import { LangProvider } from '@vllnt/ui'

export function LangProviderExample() {
return <LangProvider />
}

tsx

Code

'use client'

import { useEffect } from 'react'

import { usePathname } from 'next/navigation'

import type { SupportedLanguage } from '../../lib/types'

type LangProviderProps = {
  defaultLanguage?: SupportedLanguage
  supportedLanguages?: SupportedLanguage[]
}

export function LangProvider({
  defaultLanguage = 'en',
  supportedLanguages = ['en', 'fr'],
}: LangProviderProps) {
  const pathname = usePathname()

  useEffect(() => {
    // Extract language from pathname - matches /en, /fr, /en/, /fr/, etc.
    const langMatch = /^\/([a-z]{2})(?:\/|$)/.exec(pathname)
    const lang =
      langMatch && supportedLanguages.includes(langMatch[1] as SupportedLanguage)
        ? (langMatch[1] as SupportedLanguage)
        : defaultLanguage

    // Update the HTML lang attribute
    document.documentElement.setAttribute('lang', lang)
  }, [pathname, defaultLanguage, supportedLanguages])

  return null
}

typescript

Dependencies

next