Merge pull request #38 from amir-deriv/main

Amir/Compatibility issue and type issues fix

README.md

@@ -102,7 +102,7 @@ import { Localize } from "@deriv-com/translations";
 
 ### ~~`localize`~~ example:
 
-> Note that the `localize` function is deprecated and should be replaced with the `useTranslations` hook or the `Localize` component. the example of the `localize` function is provided for backward compatibility.
+> Note that the `localize` function is deprecated and should be replaced with the `useTranslations` hook or the `Localize` component. this function will not get the update from i18n instance once there is any changes like resource loaded or language change. the example of the `localize` function is provided for backward compatibility.
 
 ```jsx
 import { localize } from "@deriv-com/translations";

package.json

@@ -16,7 +16,7 @@
     }
   },
   "private": false,
-  "version": "1.0.4",
+  "version": "1.2.4",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build && cp ./src/scripts/deriv-extract-translations.cjs ./dist/deriv-extract-translations.cjs",

src/components/localize.tsx

@@ -10,7 +10,7 @@ type TLocalizeProps = {
   i18n?: i18n;
 };
 
-function Localize({
+function LocalizeComponent({
   i18n,
   i18n_default_text,
   values,
@@ -30,4 +30,7 @@ function Localize({
   );
 }
 
-export default withTranslation()(Localize);
+const Localize: React.ComponentType<TLocalizeProps> =
+  withTranslation()(LocalizeComponent);
+
+export default Localize;

src/provider/translation-provider.tsx

@@ -31,14 +31,14 @@ export default function TranslationProvider({
 
   useEffect(() => {
     if (i18nInstance) {
-      const initialLang = i18nInstance.language;
+      const initialLang = i18nInstance.language || defaultLang || "";
       setCurrentLanguage(initialLang);
 
       i18nInstance.on("initialized", () => {
         setIsTranslationsLoaded(true);
       });
     }
-  }, [i18nInstance]);
+  }, [i18nInstance, defaultLang]);
 
   if (!i18nInstance || !isTranslationsLoaded) return null;
 

src/utils/localize.ts

@@ -2,6 +2,8 @@ import { str as crc32 } from "crc-32";
 import i18next from "i18next";
 
 /**
+ * @deprecated use the `localize` function from the `useTranslations` hook, this function will not get the update from i18n instance once there is any changes like resource loaded or language changed
+ *
  * @param {string} string
  * @param {Record<string, unknown>} values
  * @returns {string}