update html lang after updating lang

1 files changed, 29 insertions, 14 deletions

diff --git a/packages/bank/src/hooks/index.ts b/packages/bank/src/hooks/index.ts
index a75b00d..09ce989 100644
--- a/packages/bank/src/hooks/index.ts
+++ b/packages/bank/src/hooks/index.ts
@@ -53,7 +53,7 @@ export function useBackendURL(
 export function useBackendDefaultToken(): [
   string | undefined,
   StateUpdater<string | undefined>,
-  ] {
+] {
   return useLocalStorage('backend-token');
 }
 
@@ -64,9 +64,9 @@ export function useBackendInstanceToken(
   const [defaultToken, defaultSetToken] = useBackendDefaultToken();
 
   // instance named 'default' use the default token
-  if (id === 'default') 
+  if (id === 'default')
     return [defaultToken, defaultSetToken];
-  
+
   return [token, setToken];
 }
 
@@ -76,7 +76,22 @@ export function useLang(initial?: string): [string, StateUpdater<string>] {
       ? navigator.language || (navigator as any).userLanguage
       : undefined;
   const defaultLang = (browserLang || initial || 'en').substring(0, 2);
-  return useNotNullLocalStorage('lang-preference', defaultLang);
+  const [value, setValue] = useNotNullLocalStorage('lang-preference', defaultLang);
+  function updateValue(newValue: (string | ((v: string) => string))) {
+    if (document.body.parentElement) {
+      const htmlElement = document.body.parentElement
+      if (typeof newValue === 'string') {
+        htmlElement.lang = newValue;
+        setValue(newValue)
+      } else if (typeof newValue === 'function')
+        setValue((old) => {
+          const nv = newValue(old)
+          htmlElement.lang = nv;
+          return nv
+        })
+    } else setValue(newValue)
+  }
+  return [value, updateValue]
 }
 
 export function useLocalStorage(
@@ -96,13 +111,13 @@ export function useLocalStorage(
   ) => {
     setStoredValue((p) => {
       const toStore = value instanceof Function ? value(p) : value;
-      if (typeof window !== 'undefined') 
-        if (!toStore) 
+      if (typeof window !== 'undefined')
+        if (!toStore)
           window.localStorage.removeItem(key);
-        else 
+        else
           window.localStorage.setItem(key, toStore);
-        
-      
+
+
       return toStore;
     });
   };
@@ -123,13 +138,13 @@ export function useNotNullLocalStorage(
   const setValue = (value: string | ((val: string) => string)) => {
     const valueToStore = value instanceof Function ? value(storedValue) : value;
     setStoredValue(valueToStore);
-    if (typeof window !== 'undefined') 
-      if (!valueToStore) 
+    if (typeof window !== 'undefined')
+      if (!valueToStore)
         window.localStorage.removeItem(key);
-      else 
+      else
         window.localStorage.setItem(key, valueToStore);
-      
-    
+
+
   };
 
   return [storedValue, setValue];