counterweight/arbret
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make HTML lang attribute dynamic based on selected language

Browse source 
- Create HtmlLang client component that updates document.documentElement.lang
- Add HtmlLang component to layout.tsx to sync HTML lang attribute with locale
- HTML lang now updates automatically when user changes language
This commit is contained in:
counterweight 2025-12-26 11:38:38 +01:00
parent e35e79e84d
commit 0378a8edd7
Signed by: counterweight
GPG key ID: 883EDBAA726BD96C
2 changed files with 21 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

19
frontend/app/components/HtmlLang.tsx Normal file
View file

@ -0,0 +1,19 @@
"use client";
import { useEffect } from "react";
import { useLanguage } from "../hooks/useLanguage";
/**
* Client component that updates the HTML lang attribute based on the selected language.
* This must be a client component because it uses hooks and DOM manipulation.
*/
export function HtmlLang() {
const { locale } = useLanguage();
useEffect(() => {
// Update the HTML lang attribute when locale changes
document.documentElement.lang = locale;
}, [locale]);
return null;
}

2
frontend/app/layout.tsx
View file

@ -1,5 +1,6 @@
import { AuthProvider } from "./auth-context"; import { AuthProvider } from "./auth-context";
import { Providers } from "./components/Providers"; import { Providers } from "./components/Providers";
import { HtmlLang } from "./components/HtmlLang";
export default function RootLayout({ children }: { children: React.ReactNode }) { export default function RootLayout({ children }: { children: React.ReactNode }) {
return ( return (
@ -39,6 +40,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
</head> </head>
<body> <body>
<Providers> <Providers>
<HtmlLang />
<AuthProvider>{children}</AuthProvider> <AuthProvider>{children}</AuthProvider>
</Providers> </Providers>
</body> </body>