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