react-intlayer 4.0.0 → 4.0.2
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 +97 -193
- package/package.json +12 -21
package/README.md
CHANGED
|
@@ -17,259 +17,163 @@
|
|
|
17
17
|
</a>
|
|
18
18
|
</div>
|
|
19
19
|
|
|
20
|
-
#
|
|
20
|
+
# react-intlayer: NPM Package to internationalize (i18n) an React application
|
|
21
21
|
|
|
22
|
-
**Intlayer** is
|
|
22
|
+
**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like React, React, and Express.js.
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
```bash
|
|
27
|
-
.
|
|
28
|
-
├── Component1
|
|
29
|
-
│ ├── index.content.ts
|
|
30
|
-
│ └── index.tsx
|
|
31
|
-
└── Component2
|
|
32
|
-
├── index.content.ts
|
|
33
|
-
└── index.tsx
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
```tsx
|
|
37
|
-
// ./Component1/index.content.ts
|
|
38
|
-
|
|
39
|
-
import { type DeclarationContent, t } from "intlayer";
|
|
40
|
-
|
|
41
|
-
const component1Content = {
|
|
42
|
-
key: "component1",
|
|
43
|
-
content: {
|
|
44
|
-
myTranslatedContent: t({
|
|
45
|
-
en: "Hello World",
|
|
46
|
-
fr: "Bonjour le monde",
|
|
47
|
-
es: "Hola Mundo",
|
|
48
|
-
}),
|
|
49
|
-
},
|
|
50
|
-
} satisfies DeclarationContent;
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
```tsx
|
|
54
|
-
// ./Component1/index.tsx
|
|
55
|
-
|
|
56
|
-
import { useIntlayer } from "react-intlayer";
|
|
24
|
+
**The `react-intlayer` package** allows you to internationalize your React application. It provides context providers and hooks for React internationalization.
|
|
57
25
|
|
|
58
|
-
|
|
59
|
-
const { myTranslatedContent } = useIntlayer("component1");
|
|
26
|
+
## Why Internationalize Your React Application?
|
|
60
27
|
|
|
61
|
-
|
|
62
|
-
};
|
|
63
|
-
```
|
|
28
|
+
Internationalizing your React application is essential for serving a global audience effectively. It allows your application to deliver content and messages in the preferred language of each user. This capability enhances user experience and broadens your application's reach by making it more accessible and relevant to people from different linguistic backgrounds.
|
|
64
29
|
|
|
65
|
-
## Why
|
|
30
|
+
## Why to integrate Intlayer?
|
|
66
31
|
|
|
67
32
|
- **JavaScript-Powered Content Management**: Harness the flexibility of JavaScript to define and manage your content efficiently.
|
|
68
33
|
- **Type-Safe Environment**: Leverage TypeScript to ensure all your content definitions are precise and error-free.
|
|
69
34
|
- **Integrated Content Files**: Keep your translations close to their respective components, enhancing maintainability and clarity.
|
|
70
|
-
- **Simplified Setup**: Get up and running quickly with minimal configuration, especially optimized for Next.js projects.
|
|
71
|
-
- **Server Component Support**: Perfectly suited for Next.js server components, ensuring smooth server-side rendering.
|
|
72
|
-
- **Enhanced Routing**: Full support for Next.js app routing, adapting seamlessly to complex application structures.
|
|
73
|
-
|
|
74
|
-
# Getting Started with Intlayer and React Create App
|
|
75
|
-
|
|
76
|
-
Setting up Intlayer in a Create React App application is straightforward:
|
|
77
35
|
|
|
78
|
-
##
|
|
36
|
+
## Installation
|
|
79
37
|
|
|
80
|
-
Install the necessary
|
|
38
|
+
Install the necessary package using your preferred package manager:
|
|
81
39
|
|
|
82
|
-
```bash
|
|
83
|
-
npm install
|
|
40
|
+
```bash packageManager="npm"
|
|
41
|
+
npm install react-intlayer
|
|
84
42
|
```
|
|
85
43
|
|
|
86
|
-
```bash
|
|
87
|
-
yarn add
|
|
44
|
+
```bash packageManager="yarn"
|
|
45
|
+
yarn add react-intlayer
|
|
88
46
|
```
|
|
89
47
|
|
|
90
|
-
```bash
|
|
91
|
-
pnpm add
|
|
48
|
+
```bash packageManager="pnpm"
|
|
49
|
+
pnpm add react-intlayer
|
|
92
50
|
```
|
|
93
51
|
|
|
94
|
-
##
|
|
95
|
-
|
|
96
|
-
Create a config file to configure the languages of your application:
|
|
97
|
-
|
|
98
|
-
```typescript
|
|
99
|
-
// intlayer.config.ts
|
|
100
|
-
|
|
101
|
-
import { Locales, type IntlayerConfig } from "intlayer";
|
|
102
|
-
|
|
103
|
-
const config: IntlayerConfig = {
|
|
104
|
-
internationalization: {
|
|
105
|
-
locales: [
|
|
106
|
-
Locales.ENGLISH,
|
|
107
|
-
Locales.FRENCH,
|
|
108
|
-
Locales.SPANISH,
|
|
109
|
-
// Your other locales
|
|
110
|
-
],
|
|
111
|
-
defaultLocale: Locales.ENGLISH,
|
|
112
|
-
},
|
|
113
|
-
};
|
|
114
|
-
|
|
115
|
-
export default config;
|
|
116
|
-
```
|
|
52
|
+
## Example of usage
|
|
117
53
|
|
|
118
|
-
|
|
54
|
+
With Intlayer, you can declare your content in a structured way anywhere in your codebase.
|
|
119
55
|
|
|
120
|
-
|
|
56
|
+
By default, Intlayer scans for files with the extension `.content.{ts,tsx,js,jsx,mjs,cjs}`.
|
|
121
57
|
|
|
122
|
-
|
|
58
|
+
> You can modify the default extension by setting the `contentDir` property in the [configuration file](https://github.com/aymericzip/intlayer/blob/main/docs/en/configuration.md).
|
|
123
59
|
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
60
|
+
```bash codeFormat="typescript"
|
|
61
|
+
.
|
|
62
|
+
├── intlayer.config.ts
|
|
63
|
+
└── src
|
|
64
|
+
└── components
|
|
65
|
+
├── Component1
|
|
66
|
+
│ ├── index.content.ts
|
|
67
|
+
│ └── index.tsx
|
|
68
|
+
└── Component2
|
|
69
|
+
├── index.content.ts
|
|
70
|
+
└── index.tsx
|
|
130
71
|
```
|
|
131
72
|
|
|
132
|
-
|
|
73
|
+
### Declare your content
|
|
133
74
|
|
|
134
|
-
|
|
75
|
+
`react-intlayer` is made to work with the [`intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/index.md).`intlayer` is a package that allows you to declare your content anywhere in your code. It converts multilingual content declarations into structured dictionaries that integrate seamlessly into your application.
|
|
135
76
|
|
|
136
|
-
|
|
77
|
+
Here’s an example of content declaration:
|
|
137
78
|
|
|
138
|
-
```tsx
|
|
139
|
-
|
|
140
|
-
import { t, type DeclarationContent } from "intlayer";
|
|
141
|
-
import { type ReactNode } from "react";
|
|
79
|
+
```tsx filePath="src/Component1/index.content.ts" codeFormat="typescript"
|
|
80
|
+
import { type DeclarationContent, t } from "intlayer";
|
|
142
81
|
|
|
143
|
-
const
|
|
144
|
-
key: "
|
|
82
|
+
const component1Content = {
|
|
83
|
+
key: "component-1",
|
|
145
84
|
content: {
|
|
146
|
-
|
|
147
|
-
en:
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
<>
|
|
159
|
-
Edita <code>src/App.tsx</code> y guarda para recargar
|
|
160
|
-
</>
|
|
161
|
-
),
|
|
85
|
+
myTranslatedContent: t({
|
|
86
|
+
en: "Hello World",
|
|
87
|
+
fr: "Bonjour le monde",
|
|
88
|
+
es: "Hola Mundo",
|
|
89
|
+
}),
|
|
90
|
+
numberOfCar: enu({
|
|
91
|
+
"<-1": "Less than minus one car",
|
|
92
|
+
"-1": "Minus one car",
|
|
93
|
+
"0": "No cars",
|
|
94
|
+
"1": "One car",
|
|
95
|
+
">5": "Some cars",
|
|
96
|
+
">19": "Many cars",
|
|
162
97
|
}),
|
|
163
|
-
reactLink: {
|
|
164
|
-
href: "https://reactjs.org",
|
|
165
|
-
content: t({
|
|
166
|
-
en: "Learn React",
|
|
167
|
-
fr: "Apprendre React",
|
|
168
|
-
es: "Aprender React",
|
|
169
|
-
}),
|
|
170
|
-
},
|
|
171
98
|
},
|
|
172
99
|
} satisfies DeclarationContent;
|
|
173
100
|
|
|
174
|
-
export default
|
|
101
|
+
export default component1Content;
|
|
175
102
|
```
|
|
176
103
|
|
|
177
|
-
|
|
104
|
+
### Utilize Content in Your Code
|
|
178
105
|
|
|
179
|
-
|
|
106
|
+
Once you have declared your content, you can use it in your code. Here's an example of how to use the content in a React component:
|
|
180
107
|
|
|
181
|
-
|
|
108
|
+
```tsx {4,7} fileName="src/components/Component1Example.tsx" codeFormat="typescript"
|
|
109
|
+
"use client";
|
|
182
110
|
|
|
183
|
-
|
|
184
|
-
import
|
|
185
|
-
import "./App.css";
|
|
186
|
-
import { IntlayerProvider, useIntlayer } from "react-intlayer";
|
|
187
|
-
import { LocaleSwitcher } from "./components/LangSwitcherDropDown";
|
|
111
|
+
import type { FC } from "react";
|
|
112
|
+
import { useIntlayer } from "react-intlayer";
|
|
188
113
|
|
|
189
|
-
|
|
190
|
-
const
|
|
114
|
+
export const Component1Example: FC = () => {
|
|
115
|
+
const { myTranslatedContent } = useIntlayer("component-1"); // Create related content declaration
|
|
191
116
|
|
|
192
117
|
return (
|
|
193
|
-
<
|
|
194
|
-
<
|
|
195
|
-
|
|
196
|
-
{content.getStarted}
|
|
197
|
-
<a
|
|
198
|
-
className="App-link"
|
|
199
|
-
href={content.reactLink.href.value}
|
|
200
|
-
target="_blank"
|
|
201
|
-
rel="noopener noreferrer"
|
|
202
|
-
>
|
|
203
|
-
{content.reactLink.content}
|
|
204
|
-
</a>
|
|
205
|
-
</header>
|
|
118
|
+
<div>
|
|
119
|
+
<p>{myTranslatedContent}</p>
|
|
120
|
+
</div>
|
|
206
121
|
);
|
|
207
|
-
}
|
|
122
|
+
};
|
|
123
|
+
```
|
|
208
124
|
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
<IntlayerProvider>
|
|
212
|
-
<div className="App">
|
|
213
|
-
{/* To use the useIntlayer hook properly, you should access your data in a children component */}
|
|
214
|
-
<AppContent />
|
|
215
|
-
</div>
|
|
216
|
-
<div className="absolute bottom-5 right-5 z-50">
|
|
217
|
-
<LocaleSwitcher />
|
|
218
|
-
</div>
|
|
219
|
-
</IntlayerProvider>
|
|
220
|
-
);
|
|
221
|
-
}
|
|
125
|
+
```jsx {3,6} fileName="src/components/Component1Example.mjx" codeFormat="esm"
|
|
126
|
+
"use client";
|
|
222
127
|
|
|
223
|
-
|
|
224
|
-
```
|
|
128
|
+
import { useIntlayer } from "react-intlayer";
|
|
225
129
|
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
> ```tsx
|
|
229
|
-
> <img src={content.image.src.value} alt={content.image.value} />
|
|
230
|
-
> ```
|
|
130
|
+
const Component1Example = () => {
|
|
131
|
+
const { myTranslatedContent } = useIntlayer("component-1"); // Create related content declaration
|
|
231
132
|
|
|
232
|
-
|
|
133
|
+
return (
|
|
134
|
+
<div>
|
|
135
|
+
<p>{myTranslatedContent}</p>
|
|
136
|
+
</div>
|
|
137
|
+
);
|
|
138
|
+
};
|
|
139
|
+
```
|
|
233
140
|
|
|
234
|
-
|
|
141
|
+
```jsx {3,6} fileName="src/components/Component1Example.csx" codeFormat="commonjs"
|
|
142
|
+
"use client";
|
|
235
143
|
|
|
236
|
-
|
|
237
|
-
import { Locales } from "intlayer";
|
|
238
|
-
import { useLocale } from "react-intlayer";
|
|
144
|
+
const { useIntlayer } = require("react-intlayer");
|
|
239
145
|
|
|
240
|
-
const
|
|
241
|
-
const {
|
|
146
|
+
const Component1Example = () => {
|
|
147
|
+
const { myTranslatedContent } = useIntlayer("component-1"); // Create related content declaration
|
|
242
148
|
|
|
243
149
|
return (
|
|
244
|
-
<
|
|
245
|
-
|
|
246
|
-
</
|
|
150
|
+
<div>
|
|
151
|
+
<p>{myTranslatedContent}</p>
|
|
152
|
+
</div>
|
|
247
153
|
);
|
|
248
154
|
};
|
|
249
155
|
```
|
|
250
156
|
|
|
251
|
-
##
|
|
157
|
+
## Mastering the internationalization of your React application
|
|
252
158
|
|
|
253
|
-
Intlayer
|
|
159
|
+
Intlayer provides a lot of features to help you internationalize your React application.
|
|
254
160
|
|
|
255
|
-
|
|
161
|
+
**To learn more about these features, refer to the [React Internationalization (i18n) with Intlayer and Vite and React](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_vite+react.md) guide for Vite and React Application, or the [React Internationalization (i18n) with Intlayer and React (CRA)](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_create_react_app.md) guide for React Create App.**
|
|
256
162
|
|
|
257
|
-
|
|
163
|
+
## Functions provided by `react-intlayer` package
|
|
258
164
|
|
|
259
|
-
|
|
165
|
+
The `react-intlayer` package also provides some functions to help you to internationalize your application.
|
|
260
166
|
|
|
261
|
-
|
|
262
|
-
|
|
167
|
+
- [`t()`](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/react-intlayer/t.md)
|
|
168
|
+
- [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/react-intlayer/useIntlayer.md)
|
|
169
|
+
- [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/react-intlayer/useDictionary.md)
|
|
170
|
+
- [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/react-intlayer/useLocale.md)
|
|
171
|
+
- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/react-intlayer/useIntlayerAsync.md)
|
|
263
172
|
|
|
264
|
-
|
|
265
|
-
// your custom config
|
|
266
|
-
"include": [
|
|
267
|
-
"src",
|
|
268
|
-
"types", // <- Include the auto generated types
|
|
269
|
-
],
|
|
270
|
-
}
|
|
271
|
-
```
|
|
173
|
+
## Read about Intlayer
|
|
272
174
|
|
|
273
|
-
|
|
175
|
+
- [Intlayer Website](https://intlayer.org)
|
|
176
|
+
- [Intlayer Documentation](https://intlayer.org/docs)
|
|
177
|
+
- [Intlayer GitHub](https://github.com/aymericzip/intlayer)
|
|
274
178
|
|
|
275
|
-
|
|
179
|
+
- [Ask your questions to our smart documentation](https://intlayer.org/docs/chat)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-intlayer",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Internationalization layer for React applications. Declare your multilingual contant in the same lever than your component. Powered by TypeScript, declaration files.",
|
|
6
6
|
"keywords": [
|
|
@@ -70,23 +70,17 @@
|
|
|
70
70
|
"./package.json"
|
|
71
71
|
],
|
|
72
72
|
"dependencies": {
|
|
73
|
-
"cross-spawn": "^7.0.6",
|
|
74
73
|
"js-cookie": "^3.0.5",
|
|
75
|
-
"
|
|
76
|
-
"
|
|
77
|
-
"@intlayer/
|
|
78
|
-
"@intlayer/
|
|
79
|
-
"@intlayer/config": "4.0.0",
|
|
80
|
-
"@intlayer/api": "4.0.0",
|
|
81
|
-
"@intlayer/dictionaries-entry": "4.0.0",
|
|
82
|
-
"@intlayer/webpack": "4.0.0"
|
|
74
|
+
"@intlayer/config": "4.0.2",
|
|
75
|
+
"@intlayer/core": "4.0.2",
|
|
76
|
+
"@intlayer/dictionaries-entry": "4.0.2",
|
|
77
|
+
"@intlayer/api": "4.0.2"
|
|
83
78
|
},
|
|
84
79
|
"devDependencies": {
|
|
85
80
|
"@craco/types": "^7.1.0",
|
|
86
81
|
"@types/js-cookie": "^3.0.6",
|
|
87
82
|
"@types/node": "^22.10.6",
|
|
88
83
|
"@types/react": "^18.3.1",
|
|
89
|
-
"@types/webpack": "^5.28.5",
|
|
90
84
|
"@typescript-eslint/parser": "^8.20.0",
|
|
91
85
|
"concurrently": "^9.1.2",
|
|
92
86
|
"eslint": "^9.18.0",
|
|
@@ -97,23 +91,20 @@
|
|
|
97
91
|
"tsc-alias": "^1.8.10",
|
|
98
92
|
"tsup": "^8.3.5",
|
|
99
93
|
"typescript": "^5.7.3",
|
|
100
|
-
"@intlayer/backend": "4.0.
|
|
101
|
-
"@utils/eslint-config": "1.0.4",
|
|
94
|
+
"@intlayer/backend": "4.0.2",
|
|
102
95
|
"@utils/ts-config": "1.0.4",
|
|
103
96
|
"@utils/ts-config-types": "1.0.4",
|
|
104
|
-
"@utils/tsup-config": "1.0.4"
|
|
97
|
+
"@utils/tsup-config": "1.0.4",
|
|
98
|
+
"@utils/eslint-config": "1.0.4"
|
|
105
99
|
},
|
|
106
100
|
"peerDependencies": {
|
|
107
101
|
"react": ">=16.0.0",
|
|
108
102
|
"react-dom": ">=16.0.0",
|
|
109
103
|
"vite": ">=4.0.0",
|
|
110
|
-
"
|
|
111
|
-
"@intlayer/
|
|
112
|
-
"
|
|
113
|
-
"intlayer": "4.0.
|
|
114
|
-
"@intlayer/webpack": "4.0.0",
|
|
115
|
-
"@intlayer/core": "4.0.0",
|
|
116
|
-
"@intlayer/config": "4.0.0"
|
|
104
|
+
"@intlayer/config": "4.0.2",
|
|
105
|
+
"@intlayer/dictionaries-entry": "4.0.2",
|
|
106
|
+
"intlayer": "4.0.2",
|
|
107
|
+
"@intlayer/core": "4.0.2"
|
|
117
108
|
},
|
|
118
109
|
"engines": {
|
|
119
110
|
"node": ">=14.18"
|