i18n-keyless-react 1.5.3 → 1.6.0

package/dist/I18nKeylessText.d.ts

@@ -1,11 +1,8 @@
 import React from "react";
-interface I18nTextProps {
-    children: string;
-}
-export declare const I18nKeylessText: React.FC<I18nTextProps>;
-interface I18nKeylessTextWithReplacementProps {
+interface I18nKeylessTextProps {
     children: string;
     replace?: Record<string, string>;
+    context?: string;
 }
-export declare const I18nKeylessTextWithReplacement: React.FC<I18nKeylessTextWithReplacementProps>;
+export declare const I18nKeylessText: React.FC<I18nKeylessTextProps>;
 export {};

package/dist/I18nKeylessText.js

@@ -1,29 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useMemo } from "react";
 import { useI18nKeyless } from "./store";
-export const I18nKeylessText = ({ children }) => {
+export const I18nKeylessText = ({ children, replace, context }) => {
     const translations = useI18nKeyless((store) => store.translations);
     const currentLanguage = useI18nKeyless((store) => store.currentLanguage);
     const config = useI18nKeyless((store) => store.config);
     const translateKey = useI18nKeyless((store) => store.translateKey);
     useEffect(() => {
-        translateKey(children);
+        translateKey(children, context);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [children, currentLanguage]);
-    const translatedText = currentLanguage === config.languages.primary ? children : translations[children] || children;
-    return _jsx(React.Fragment, { children: translatedText }, currentLanguage);
-};
-export const I18nKeylessTextWithReplacement = ({ children, replace, }) => {
-    const translations = useI18nKeyless((store) => store.translations);
-    const currentLanguage = useI18nKeyless((store) => store.currentLanguage);
-    const config = useI18nKeyless((store) => store.config);
-    const translateKey = useI18nKeyless((store) => store.translateKey);
-    useEffect(() => {
-        translateKey(children);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [children, currentLanguage]);
-    const translatedText = currentLanguage === config.languages.primary ? children : translations[children] || children;
-    const replacedText = useMemo(() => {
+    }, [children, currentLanguage, context]);
+    const translatedText = currentLanguage === config.languages.primary
+        ? children
+        : translations[context ? `${children}__${context}` : children] || children;
+    const finalText = useMemo(() => {
         if (!replace) {
             return translatedText;
         }
@@ -36,5 +26,5 @@ export const I18nKeylessTextWithReplacement = ({ children, replace, }) => {
         // Replace all occurrences in a single pass
         return translatedText.replace(regex, (matched) => replace[matched] || matched);
     }, [translatedText, replace]);
-    return _jsx(React.Fragment, { children: replacedText }, currentLanguage);
+    return _jsx(React.Fragment, { children: finalText }, currentLanguage);
 };

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { I18nKeylessText, I18nKeylessTextWithReplacement } from "./I18nKeylessText";
+export { I18nKeylessText } from "./I18nKeylessText";
 export { init, getTranslation, setCurrentLanguage, useCurrentLanguage, clearI18nKeylessStorage, fetchAllTranslations, } from "./store";

package/dist/index.js

@@ -1,2 +1,2 @@
-export { I18nKeylessText, I18nKeylessTextWithReplacement } from "./I18nKeylessText";
+export { I18nKeylessText } from "./I18nKeylessText";
 export { init, getTranslation, setCurrentLanguage, useCurrentLanguage, clearI18nKeylessStorage, fetchAllTranslations, } from "./store";

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "i18n-keyless-react",
     "private": false,
-    "version": "1.5.3",
+    "version": "1.6.0",
     "type": "module",
     "main": "./dist/index.js",
     "module": "./dist/index.js",

package/dist/store.d.ts

@@ -2,7 +2,7 @@ import { I18nConfig, Lang, TranslationStore } from "i18n-keyless-core";
 export declare const useI18nKeyless: import("zustand").UseBoundStore<import("zustand").StoreApi<TranslationStore>>;
 export declare function init(config: I18nConfig): Promise<void>;
 export declare function useCurrentLanguage(): Lang | null;
-export declare function getTranslation(key: string): string | undefined;
+export declare function getTranslation(key: string, context?: string): string | undefined;
 export declare function setCurrentLanguage(lang: I18nConfig["languages"]["supported"][number]): void;
 export declare function fetchAllTranslations(targetLanguage: Lang): Promise<void>;
 export declare function clearI18nKeylessStorage(): Promise<void>;

package/dist/store.js

@@ -100,7 +100,7 @@ export const useI18nKeyless = create((set, get) => ({
             set({ lastRefresh: lastRefresh });
         }
     },
-    getTranslation: (text) => {
+    getTranslation: (text, context) => {
         const currentLanguage = get().currentLanguage;
         const config = get().config;
         if (currentLanguage === config.languages.primary) {
@@ -108,7 +108,7 @@ export const useI18nKeyless = create((set, get) => ({
         }
         const translation = get().translations[text];
         if (!translation) {
-            get().translateKey(text);
+            get().translateKey(text, context);
         }
         return translation || text;
     },
@@ -121,7 +121,7 @@ export const useI18nKeyless = create((set, get) => ({
         }
         setItem(storeKeys.translations, JSON.stringify(nextTranslations), storage);
     },
-    translateKey: (key) => {
+    translateKey: (key, context) => {
         // if (key.length > 280) {
         //   console.error("i18n-keyless: Key length exceeds 280 characters limit:", key);
         //   return;
@@ -151,6 +151,7 @@ export const useI18nKeyless = create((set, get) => ({
                 else {
                     const body = {
                         key,
+                        context,
                         languages: config.languages.supported,
                         primaryLanguage: config.languages.primary,
                     };
@@ -234,8 +235,8 @@ export function useCurrentLanguage() {
     const currentLanguage = useI18nKeyless((state) => state.currentLanguage);
     return currentLanguage;
 }
-export function getTranslation(key) {
-    return useI18nKeyless.getState().getTranslation(key);
+export function getTranslation(key, context) {
+    return useI18nKeyless.getState().getTranslation(key, context);
 }
 export function setCurrentLanguage(lang) {
     return useI18nKeyless.getState().setLanguage(lang);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "i18n-keyless-react",
   "private": false,
-  "version": "1.5.3",
+  "version": "1.6.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",