@dcl/hooks 1.0.1-20251223125619.commit-1446f8b → 1.0.1-20251229200811.commit-7c01c67

package/README.md

@@ -20,6 +20,7 @@ npm install @dcl/hooks
 - `useAsyncEffect`: Async version of useEffect
 - `useAsyncMemo`: Async version of useMemo
 - `useInfiniteScroll`: Infinite scroll functionality for loading more content
+- `useTranslation`: Simple and lightweight translation management
 
 ## Examples
 
@@ -464,6 +465,219 @@ function App() {
 }
 ```
 
+### useTranslation
+
+The `useTranslation` hook provides i18n capabilities powered by `@formatjs/intl`, giving you access to advanced formatting functions for numbers, dates, currencies, and more.
+
+Basic usage:
+
+```typescript
+import { useTranslation } from '@dcl/hooks'
+
+const translations = {
+  en: {
+    greeting: 'Hello, {name}!',
+    welcome: 'Welcome to our app',
+    items: '{count, plural, =0 {No items} one {# item} other {# items}}'
+  },
+  es: {
+    greeting: 'Hola, {name}!',
+    welcome: 'Bienvenido a nuestra aplicación',
+    items: '{count, plural, =0 {Sin elementos} one {# elemento} other {# elementos}}'
+  }
+}
+
+function MyComponent() {
+  const { t, intl, locale, setLocale } = useTranslation({
+    locale: 'en',
+    translations
+  })
+
+  return (
+    <div>
+      <p>{t('greeting', { name: 'John' })}</p>
+      <p>{t('items', { count: 5 })}</p>
+      <button onClick={() => setLocale('es')}>
+        Switch to Spanish
+      </button>
+    </div>
+  )
+}
+```
+
+Using the `intl` object for advanced formatting:
+
+```typescript
+function AdvancedFormattingExample() {
+  const { t, intl } = useTranslation({
+    locale: 'en',
+    translations: {
+      en: {
+        product_price: 'Price: {price}'
+      }
+    }
+  })
+
+  return (
+    <div>
+      {/* Format numbers */}
+      <p>Count: {intl.formatNumber(1000)}</p>
+
+      {/* Format dates */}
+      <p>Today: {intl.formatDate(new Date(), {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+      })}</p>
+
+      {/* Format currency */}
+      <p>{intl.formatNumber(99.99, {
+        style: 'currency',
+        currency: 'USD'
+      })}</p>
+
+      {/* Format relative time */}
+      <p>{intl.formatRelativeTime(-1, 'day')}</p>
+
+      {/* Use formatMessage directly */}
+      <p>{intl.formatMessage({ id: 'product_price' }, { price: '$99' })}</p>
+    </div>
+  )
+}
+```
+
+With fallback locale:
+
+```typescript
+const translations = {
+  en: {
+    greeting: 'Hello!',
+    welcome: 'Welcome!'
+  },
+  es: {
+    greeting: 'Hola!'
+    // 'welcome' is missing in Spanish
+  }
+}
+
+function MyComponent() {
+  const { t } = useTranslation({
+    locale: 'es',
+    translations,
+    fallbackLocale: 'en' // Will use English if translation is missing
+  })
+
+  return (
+    <div>
+      <p>{t('greeting')}</p> {/* Shows: "Hola!" */}
+      <p>{t('welcome')}</p> {/* Shows: "Welcome!" (from fallback) */}
+    </div>
+  )
+}
+```
+
+Using TranslationProvider for context-based translations:
+
+```typescript
+import { TranslationProvider, useTranslation } from '@dcl/hooks'
+
+const translations = {
+  en: {
+    greeting: 'Hello!',
+    welcome: 'Welcome to our app'
+  },
+  es: {
+    greeting: 'Hola!',
+    welcome: 'Bienvenido a nuestra aplicación'
+  }
+}
+
+function App() {
+  return (
+    <TranslationProvider
+      locale="en"
+      translations={translations}
+      fallbackLocale="en"
+    >
+      <MyComponent />
+    </TranslationProvider>
+  )
+}
+
+function MyComponent() {
+  // Can be used without options when inside TranslationProvider
+  const { t, locale, setLocale } = useTranslation()
+
+  return (
+    <div>
+      <p>{t('greeting')}</p>
+      <p>{t('welcome')}</p>
+      <button onClick={() => setLocale('es')}>
+        Switch to Spanish
+      </button>
+    </div>
+  )
+}
+```
+
+Using ICU Message Syntax:
+
+```typescript
+const translations = {
+  en: {
+    // Pluralization
+    items: '{count, plural, =0 {No items} one {# item} other {# items}}',
+    // Select syntax
+    gender: '{gender, select, male {He} female {She} other {They}}',
+    // Complex ICU
+    notification: '{count, plural, =0 {No notifications} =1 {You have one notification} other {You have # notifications}}'
+  }
+}
+
+function MyComponent() {
+  const { t } = useTranslation({
+    locale: 'en',
+    translations
+  })
+
+  return (
+    <div>
+      <p>{t('items', { count: 0 })}</p> {/* "No items" */}
+      <p>{t('items', { count: 1 })}</p> {/* "1 item" */}
+      <p>{t('items', { count: 5 })}</p> {/* "5 items" */}
+      <p>{t('gender', { gender: 'male' })}</p> {/* "He" */}
+      <p>{t('notification', { count: 3 })}</p> {/* "You have 3 notifications" */}
+    </div>
+  )
+}
+```
+
+Additional intl formatting functions:
+
+```typescript
+function MyComponent() {
+  const { intl } = useTranslation({
+    locale: 'en',
+    translations: { en: {} }
+  })
+
+  return (
+    <div>
+      {/* Format lists */}
+      <p>{intl.formatList(['apple', 'banana', 'orange'])}</p>
+      {/* "apple, banana, and orange" */}
+
+      {/* Format display names */}
+      <p>{intl.formatDisplayName('es', { type: 'language' })}</p>
+      {/* "Spanish" */}
+      
+      <p>{intl.formatDisplayName('US', { type: 'region' })}</p>
+      {/* "United States" */}
+    </div>
+  )
+}
+```
+
 ## License
 
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

package/esm/contexts/analytics/AnalyticsProvider.js

@@ -1,4 +1,5 @@
-import React, { createContext, useMemo, useRef, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useMemo, useRef, useState } from "react";
 import { isbot } from "isbot";
 import { useAsyncEffect } from "../../hooks/useAsyncEffect";
 const AnalyticsContext = createContext(null);
@@ -53,7 +54,7 @@ const AnalyticsProvider = (props) => {
             },
         };
     }, [isInitialized]);
-    return (React.createElement(AnalyticsContext.Provider, { value: contextValue }, children));
+    return (_jsx(AnalyticsContext.Provider, { value: contextValue, children: children }));
 };
 export { AnalyticsContext, AnalyticsProvider };
 //# sourceMappingURL=AnalyticsProvider.js.map

package/esm/contexts/analytics/AnalyticsProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnalyticsProvider.js","sourceRoot":"","sources":["../../../src/contexts/analytics/AnalyticsProvider.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AnalyticsProvider.js","sourceRoot":"","sources":["../../../src/contexts/analytics/AnalyticsProvider.tsx"],"names":[],"mappings":"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"}

package/esm/contexts/index.d.ts

@@ -1,2 +1,5 @@
 export * from "./analytics/AnalyticsProvider";
 export type * from "./analytics/types";
+export * from "./translation/TranslationContext";
+export * from "./translation/TranslationProvider";
+export type * from "./translation/types";

package/esm/contexts/index.js

@@ -1,2 +1,4 @@
 export * from "./analytics/AnalyticsProvider";
+export * from "./translation/TranslationContext";
+export * from "./translation/TranslationProvider";
 //# sourceMappingURL=index.js.map

package/esm/contexts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAA;AAE7C,cAAc,kCAAkC,CAAA;AAChD,cAAc,mCAAmC,CAAA"}

package/esm/contexts/translation/TranslationContext.d.ts

@@ -0,0 +1,3 @@
+import type { TranslationContextType } from "./types";
+declare const TranslationContext: import("react").Context<TranslationContextType | null>;
+export { TranslationContext };

package/esm/contexts/translation/TranslationContext.js

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+const TranslationContext = createContext(null);
+export { TranslationContext };
+//# sourceMappingURL=TranslationContext.js.map

package/esm/contexts/translation/TranslationContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TranslationContext.js","sourceRoot":"","sources":["../../../src/contexts/translation/TranslationContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAGrC,MAAM,kBAAkB,GAAG,aAAa,CAAgC,IAAI,CAAC,CAAA;AAE7E,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

package/esm/contexts/translation/TranslationProvider.d.ts

@@ -0,0 +1,3 @@
+import type { TranslationProviderProps } from "./types";
+declare const TranslationProvider: <L extends string = string>(props: TranslationProviderProps<L>) => import("react/jsx-runtime").JSX.Element;
+export { TranslationProvider };

package/esm/contexts/translation/TranslationProvider.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { TranslationContext } from "./TranslationContext";
+import { useTranslation } from "../../hooks/useTranslation";
+const TranslationProvider = (props) => {
+    const { locale, translations, fallbackLocale, children } = props;
+    const translationResult = useTranslation({
+        locale,
+        translations,
+        fallbackLocale,
+    });
+    const contextValue = useMemo(() => translationResult, [translationResult]);
+    return (_jsx(TranslationContext.Provider, { value: contextValue, children: children }));
+};
+export { TranslationProvider };
+//# sourceMappingURL=TranslationProvider.js.map

package/esm/contexts/translation/TranslationProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TranslationProvider.js","sourceRoot":"","sources":["../../../src/contexts/translation/TranslationProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAG3D,MAAM,mBAAmB,GAAG,CAC1B,KAAkC,EAClC,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAEhE,MAAM,iBAAiB,GAAG,cAAc,CAAC;QACvC,MAAM;QACN,YAAY;QACZ,cAAc;KACf,CAAC,CAAA;IAEF,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,iBAAiB,EACvB,CAAC,iBAAiB,CAAC,CACpB,CAAA;IAED,OAAO,CACL,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC7C,QAAQ,GACmB,CAC/B,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAA"}

package/esm/contexts/translation/types.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import type { LanguageTranslations } from "../../hooks/useTranslation";
+type TranslationProviderProps<L extends string = string> = {
+    locale: L;
+    translations: LanguageTranslations;
+    fallbackLocale?: L;
+    children: ReactNode;
+};
+type TranslationContextType = {
+    t: (key: string, values?: Record<string, string | number>) => string;
+    intl: import("@formatjs/intl").IntlShape;
+    locale: string;
+    setLocale: (locale: string) => void;
+    error: string | null;
+};
+export type { TranslationProviderProps, TranslationContextType };

package/esm/contexts/translation/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/esm/contexts/translation/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/contexts/translation/types.ts"],"names":[],"mappings":""}

package/esm/hooks/index.d.ts

@@ -2,6 +2,7 @@ export type { AdvancedNavigatorUAData } from "./useAdvancedUserAgentData";
 export type { AsyncMemoResult, AsyncMemoResultState } from "./useAsyncMemo";
 export type { AsyncStateResult, AsyncStateResultState } from "./useAsyncState";
 export type { UseInfiniteScrollOptions } from "./useInfiniteScroll";
+export type { Translations, LanguageTranslations, TranslationState, TranslationOptions, TranslationResult, } from "./useTranslation";
 export { useAdvancedUserAgentData } from "./useAdvancedUserAgentData";
 export { useAnalytics } from "./useAnalytics";
 export { useAsyncEffect } from "./useAsyncEffect";
@@ -12,3 +13,4 @@ export { useAsyncTasks } from "./useAsyncTasks";
 export { useInfiniteScroll } from "./useInfiniteScroll";
 export { usePageTracking } from "./usePageTracking";
 export { usePatchState } from "./usePatchState";
+export { useTranslation } from "./useTranslation";

package/esm/hooks/index.js

@@ -9,4 +9,5 @@ export { useAsyncTasks } from "./useAsyncTasks";
 export { useInfiniteScroll } from "./useInfiniteScroll";
 export { usePageTracking } from "./usePageTracking";
 export { usePatchState } from "./usePatchState";
+export { useTranslation } from "./useTranslation";
 //# sourceMappingURL=index.js.map

package/esm/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAMA,QAAQ;AACR,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAaA,QAAQ;AACR,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA"}

package/esm/hooks/useTranslation/index.d.ts

@@ -0,0 +1,2 @@
+export { useTranslation } from "./useTranslation";
+export type { Translations, LanguageTranslations, TranslationState, TranslationOptions, TranslationResult, } from "./useTranslation.type";

package/esm/hooks/useTranslation/index.js

@@ -0,0 +1,2 @@
+export { useTranslation } from "./useTranslation";
+//# sourceMappingURL=index.js.map

package/esm/hooks/useTranslation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/useTranslation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA"}

package/esm/hooks/useTranslation/useTranslation.d.ts

@@ -0,0 +1,77 @@
+import { TranslationOptions, TranslationResult } from "./useTranslation.type";
+/**
+ * Hook to manage translations in a React application using @formatjs/intl
+ *
+ * Can be used in two ways:
+ * 1. With options (standalone mode): Provides translations directly
+ * 2. Without options (context mode): Uses TranslationProvider context
+ *
+ * @param options - Optional configuration options for translations. If not provided, will use TranslationProvider context.
+ * @param options.locale - The initial locale to use (required in standalone mode)
+ * @param options.translations - An object containing all translations for all locales (required in standalone mode)
+ * @param options.fallbackLocale - Optional fallback locale if a translation is not found
+ *
+ * @returns An object with translation utilities including the full IntlShape instance
+ *
+ * @example
+ * Standalone mode:
+ * ```tsx
+ * const translations = {
+ *   en: {
+ *     "greeting": "Hello, {name}!",
+ *     "welcome": "Welcome to our app"
+ *   },
+ *   es: {
+ *     "greeting": "Hola, {name}!",
+ *     "welcome": "Bienvenido a nuestra aplicación"
+ *   }
+ * }
+ *
+ * function MyComponent() {
+ *   const { t, intl, locale, setLocale } = useTranslation({
+ *     locale: 'en',
+ *     translations
+ *   })
+ *
+ *   return (
+ *     <div>
+ *       <p>{t('greeting', { name: 'John' })}</p>
+ *       <p>{intl.formatNumber(1000)}</p>
+ *       <p>{intl.formatDate(new Date())}</p>
+ *       <button onClick={() => setLocale('es')}>Switch to Spanish</button>
+ *     </div>
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * Context mode:
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <TranslationProvider
+ *       locale="en"
+ *       translations={{
+ *         en: { greeting: "Hello!" },
+ *         es: { greeting: "Hola!" }
+ *       }}
+ *     >
+ *       <MyComponent />
+ *     </TranslationProvider>
+ *   )
+ * }
+ *
+ * function MyComponent() {
+ *   const { t, locale, setLocale } = useTranslation()
+ *
+ *   return (
+ *     <div>
+ *       <p>{t('greeting')}</p>
+ *       <button onClick={() => setLocale('es')}>Switch to Spanish</button>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+declare const useTranslation: <L extends string = string>(options?: Partial<TranslationOptions<L>>) => TranslationResult;
+export { useTranslation };

package/esm/hooks/useTranslation/useTranslation.js

@@ -0,0 +1,161 @@
+import { useCallback, useContext, useMemo, useState } from "react";
+import { createIntl, createIntlCache } from "@formatjs/intl";
+import { TranslationContext } from "../../contexts/translation/TranslationContext";
+// Create a cache for @formatjs/intl to improve performance
+const cache = createIntlCache();
+/**
+ * Hook to manage translations in a React application using @formatjs/intl
+ *
+ * Can be used in two ways:
+ * 1. With options (standalone mode): Provides translations directly
+ * 2. Without options (context mode): Uses TranslationProvider context
+ *
+ * @param options - Optional configuration options for translations. If not provided, will use TranslationProvider context.
+ * @param options.locale - The initial locale to use (required in standalone mode)
+ * @param options.translations - An object containing all translations for all locales (required in standalone mode)
+ * @param options.fallbackLocale - Optional fallback locale if a translation is not found
+ *
+ * @returns An object with translation utilities including the full IntlShape instance
+ *
+ * @example
+ * Standalone mode:
+ * ```tsx
+ * const translations = {
+ *   en: {
+ *     "greeting": "Hello, {name}!",
+ *     "welcome": "Welcome to our app"
+ *   },
+ *   es: {
+ *     "greeting": "Hola, {name}!",
+ *     "welcome": "Bienvenido a nuestra aplicación"
+ *   }
+ * }
+ *
+ * function MyComponent() {
+ *   const { t, intl, locale, setLocale } = useTranslation({
+ *     locale: 'en',
+ *     translations
+ *   })
+ *
+ *   return (
+ *     <div>
+ *       <p>{t('greeting', { name: 'John' })}</p>
+ *       <p>{intl.formatNumber(1000)}</p>
+ *       <p>{intl.formatDate(new Date())}</p>
+ *       <button onClick={() => setLocale('es')}>Switch to Spanish</button>
+ *     </div>
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * Context mode:
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <TranslationProvider
+ *       locale="en"
+ *       translations={{
+ *         en: { greeting: "Hello!" },
+ *         es: { greeting: "Hola!" }
+ *       }}
+ *     >
+ *       <MyComponent />
+ *     </TranslationProvider>
+ *   )
+ * }
+ *
+ * function MyComponent() {
+ *   const { t, locale, setLocale } = useTranslation()
+ *
+ *   return (
+ *     <div>
+ *       <p>{t('greeting')}</p>
+ *       <button onClick={() => setLocale('es')}>Switch to Spanish</button>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+const useTranslation = (options) => {
+    const context = useContext(TranslationContext);
+    if (!options && !context) {
+        throw new Error("useTranslation must be used with either options or within a TranslationProvider");
+    }
+    if (!options && context) {
+        return context;
+    }
+    if (options && !options.locale) {
+        throw new Error("locale is required when using useTranslation with options");
+    }
+    if (options && !options.translations) {
+        throw new Error("translations is required when using useTranslation with options");
+    }
+    const validatedOptions = options;
+    const [state, setState] = useState({
+        locale: validatedOptions.locale,
+        translations: validatedOptions.translations,
+        error: null,
+    });
+    // Create intl instance with current locale and translations
+    const intl = useMemo(() => {
+        const currentTranslations = state.translations[state.locale];
+        const fallbackTranslations = validatedOptions.fallbackLocale &&
+            state.translations[validatedOptions.fallbackLocale];
+        if (!currentTranslations && fallbackTranslations) {
+            console.error(`No translations found for locale "${state.locale}". Using fallback locale "${validatedOptions.fallbackLocale}".`);
+            return createIntl({
+                locale: state.locale,
+                messages: fallbackTranslations,
+            }, cache);
+        }
+        if (!currentTranslations) {
+            console.error(`No translations found for locale "${state.locale}". Using empty translations.`);
+            return createIntl({
+                locale: state.locale,
+                messages: {},
+            }, cache);
+        }
+        const shouldMergeFallback = validatedOptions.fallbackLocale &&
+            state.locale !== validatedOptions.fallbackLocale &&
+            fallbackTranslations;
+        const messages = shouldMergeFallback
+            ? {
+                ...fallbackTranslations,
+                ...currentTranslations,
+            }
+            : currentTranslations;
+        return createIntl({
+            locale: state.locale,
+            messages,
+        }, cache);
+    }, [state.locale, state.translations, validatedOptions.fallbackLocale]);
+    // Simplified t() function using intl.formatMessage
+    const t = useCallback((key, values) => {
+        return intl.formatMessage({ id: key }, values);
+    }, [intl]);
+    const setLocale = useCallback((newLocale) => {
+        if (!state.translations[newLocale]) {
+            console.error(`Locale "${newLocale}" not found in translations. Available locales: ${Object.keys(state.translations).join(", ")}`);
+            setState((current) => ({
+                ...current,
+                error: `Locale "${newLocale}" not found`,
+            }));
+            return;
+        }
+        setState((current) => ({
+            ...current,
+            locale: newLocale,
+            error: null,
+        }));
+    }, [state.translations]);
+    return {
+        t,
+        intl,
+        locale: state.locale,
+        setLocale,
+        error: state.error,
+    };
+};
+export { useTranslation };
+//# sourceMappingURL=useTranslation.js.map

package/esm/hooks/useTranslation/useTranslation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTranslation.js","sourceRoot":"","sources":["../../../src/hooks/useTranslation/useTranslation.ts"],"names":[],"mappings":"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"}

package/esm/hooks/useTranslation/useTranslation.type.d.ts

@@ -0,0 +1,21 @@
+import type { IntlShape } from "@formatjs/intl";
+type Translations = Record<string, string>;
+type LanguageTranslations = Record<string, Translations>;
+type TranslationState<L extends string = string> = {
+    locale: L;
+    translations: LanguageTranslations;
+    error: string | null;
+};
+type TranslationOptions<L extends string = string> = {
+    locale: L;
+    translations: LanguageTranslations;
+    fallbackLocale?: L;
+};
+type TranslationResult = {
+    t: (key: string, values?: Record<string, string | number>) => string;
+    intl: IntlShape;
+    locale: string;
+    setLocale: (locale: string) => void;
+    error: string | null;
+};
+export type { LanguageTranslations, TranslationOptions, TranslationResult, TranslationState, Translations, };

package/esm/hooks/useTranslation/useTranslation.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useTranslation.type.js.map

package/esm/hooks/useTranslation/useTranslation.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTranslation.type.js","sourceRoot":"","sources":["../../../src/hooks/useTranslation/useTranslation.type.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcl/hooks",
-  "version": "1.0.1-20251223125619.commit-1446f8b",
+  "version": "1.0.1-20251229200811.commit-7c01c67",
   "type": "module",
   "main": "esm/index.js",
   "module": "esm/index.js",
@@ -48,6 +48,7 @@
     "typescript-eslint": "^7.15.0"
   },
   "dependencies": {
+    "@formatjs/intl": "^3.1.8",
     "@segment/analytics-next": "^1.79.0",
     "@sentry/browser": "^9.0.0",
     "isbot": "^5.1.25",
@@ -77,5 +78,5 @@
       "<rootDir>/test/setup.ts"
     ]
   },
-  "commit": "1446f8b56b46bc5df904fb4755a45341bab801ff"
+  "commit": "7c01c67ea4f59e6cd131b191224dc86e24b568c5"
 }