Merge pull request #203 from ethereum/rtl-locale-refresh

Html direction update on locale change

Author: wackerow

src/hooks/useLocaleDirection.ts

@@ -0,0 +1,19 @@
+import { useEffect } from "react"
+import { useRouter } from "next/router"
+
+import { Lang } from "@/lib/types"
+
+import { isLangRightToLeft } from "@/lib/utils/translations"
+
+/**
+ * Custom hook that sets the DOM direction based on the locale,
+ * responding to changes in the locale without requiring refresh.
+ */
+export const useLocaleDirection = (): void => {
+  const { locale } = useRouter()
+
+  useEffect(() => {
+    const dir = isLangRightToLeft(locale as Lang) ? "rtl" : "ltr"
+    document.documentElement.setAttribute("dir", dir)
+  }, [locale])
+}

src/pages/_app.tsx

@@ -1,4 +1,3 @@
-import { useRouter } from "next/router"
 import { appWithTranslation } from "next-i18next"
 // ChakraProvider import updated as recommended on https://github.com/chakra-ui/chakra-ui/issues/4975#issuecomment-1174234230
 // to reduce bundle size. Should be reverted to "@chakra-ui/react" in case on theme issues
@@ -7,10 +6,9 @@ import { extendBaseTheme } from "@chakra-ui/react"
 
 import customTheme from "@/@chakra-ui/theme"
 
-import { AppPropsWithLayout, Lang } from "@/lib/types"
-
-import { isLangRightToLeft } from "@/lib/utils/translations"
+import { AppPropsWithLayout } from "@/lib/types"
 
+import { useLocaleDirection } from "@/hooks/useLocaleDirection"
 import { RootLayout } from "@/layouts"
 import { inter, mono } from "@/lib/fonts"
 
@@ -19,12 +17,9 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
   // Use the layout defined at the page level, if available
   const getLayout = Component.getLayout ?? ((page) => page)
 
-  const { locale } = useRouter()
+  useLocaleDirection()
 
-  const theme = extendBaseTheme({
-    ...customTheme,
-    direction: isLangRightToLeft(locale as Lang) ? "rtl" : "ltr",
-  })
+  const theme = extendBaseTheme(customTheme)
 
   return (
     <>