@dcl/hooks 1.0.1-20251229200811.commit-7c01c67 → 1.1.1-20260129143559.commit-7ede5bb
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -505,6 +505,31 @@ function MyComponent() {
|
|
|
505
505
|
}
|
|
506
506
|
```
|
|
507
507
|
|
|
508
|
+
Nested translations (dot notation):
|
|
509
|
+
|
|
510
|
+
```typescript
|
|
511
|
+
const translations = {
|
|
512
|
+
en: {
|
|
513
|
+
components: {
|
|
514
|
+
blog: {
|
|
515
|
+
related_post: {
|
|
516
|
+
title: 'Related posts'
|
|
517
|
+
}
|
|
518
|
+
}
|
|
519
|
+
}
|
|
520
|
+
}
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
function MyComponent() {
|
|
524
|
+
const { t } = useTranslation({
|
|
525
|
+
locale: 'en',
|
|
526
|
+
translations
|
|
527
|
+
})
|
|
528
|
+
|
|
529
|
+
return <p>{t('components.blog.related_post.title')}</p>
|
|
530
|
+
}
|
|
531
|
+
```
|
|
532
|
+
|
|
508
533
|
Using the `intl` object for advanced formatting:
|
|
509
534
|
|
|
510
535
|
```typescript
|
|
@@ -3,6 +3,21 @@ import { createIntl, createIntlCache } from "@formatjs/intl";
|
|
|
3
3
|
import { TranslationContext } from "../../contexts/translation/TranslationContext";
|
|
4
4
|
// Create a cache for @formatjs/intl to improve performance
|
|
5
5
|
const cache = createIntlCache();
|
|
6
|
+
const flattenTranslations = (translations, parentKey = "", result = {}) => {
|
|
7
|
+
Object.entries(translations).forEach(([key, value]) => {
|
|
8
|
+
const translationKey = parentKey ? `${parentKey}.${key}` : key;
|
|
9
|
+
if (typeof value === "string") {
|
|
10
|
+
result[translationKey] = value;
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
if (value && typeof value === "object" && !Array.isArray(value)) {
|
|
14
|
+
flattenTranslations(value, translationKey, result);
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
console.error(`Invalid translation value for key "${translationKey}". Expected string or nested object.`);
|
|
18
|
+
});
|
|
19
|
+
return result;
|
|
20
|
+
};
|
|
6
21
|
/**
|
|
7
22
|
* Hook to manage translations in a React application using @formatjs/intl
|
|
8
23
|
*
|
|
@@ -97,11 +112,18 @@ const useTranslation = (options) => {
|
|
|
97
112
|
translations: validatedOptions.translations,
|
|
98
113
|
error: null,
|
|
99
114
|
});
|
|
115
|
+
const flattenedTranslations = useMemo(() => {
|
|
116
|
+
const locales = {};
|
|
117
|
+
Object.entries(state.translations).forEach(([locale, translations]) => {
|
|
118
|
+
locales[locale] = flattenTranslations(translations);
|
|
119
|
+
});
|
|
120
|
+
return locales;
|
|
121
|
+
}, [state.translations]);
|
|
100
122
|
// Create intl instance with current locale and translations
|
|
101
123
|
const intl = useMemo(() => {
|
|
102
|
-
const currentTranslations =
|
|
124
|
+
const currentTranslations = flattenedTranslations[state.locale];
|
|
103
125
|
const fallbackTranslations = validatedOptions.fallbackLocale &&
|
|
104
|
-
|
|
126
|
+
flattenedTranslations[validatedOptions.fallbackLocale];
|
|
105
127
|
if (!currentTranslations && fallbackTranslations) {
|
|
106
128
|
console.error(`No translations found for locale "${state.locale}". Using fallback locale "${validatedOptions.fallbackLocale}".`);
|
|
107
129
|
return createIntl({
|
|
@@ -129,7 +151,7 @@ const useTranslation = (options) => {
|
|
|
129
151
|
locale: state.locale,
|
|
130
152
|
messages,
|
|
131
153
|
}, cache);
|
|
132
|
-
}, [state.locale,
|
|
154
|
+
}, [state.locale, flattenedTranslations, validatedOptions.fallbackLocale]);
|
|
133
155
|
// Simplified t() function using intl.formatMessage
|
|
134
156
|
const t = useCallback((key, values) => {
|
|
135
157
|
return intl.formatMessage({ id: key }, values);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTranslation.js","sourceRoot":"","sources":["../../../src/hooks/useTranslation/useTranslation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"useTranslation.js","sourceRoot":"","sources":["../../../src/hooks/useTranslation/useTranslation.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import type { IntlShape } from "@formatjs/intl";
|
|
2
|
-
|
|
2
|
+
interface Translations {
|
|
3
|
+
[key: string]: string | Translations;
|
|
4
|
+
}
|
|
3
5
|
type LanguageTranslations = Record<string, Translations>;
|
|
4
6
|
type TranslationState<L extends string = string> = {
|
|
5
7
|
locale: L;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dcl/hooks",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1-20260129143559.commit-7ede5bb",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "esm/index.js",
|
|
6
6
|
"module": "esm/index.js",
|
|
@@ -78,5 +78,5 @@
|
|
|
78
78
|
"<rootDir>/test/setup.ts"
|
|
79
79
|
]
|
|
80
80
|
},
|
|
81
|
-
"commit": "
|
|
81
|
+
"commit": "7ede5bbfecc829b61ed7b752cab0eb989de9e213"
|
|
82
82
|
}
|