astro-react-i18next 0.1.0 → 0.1.1
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 +188 -0
- package/dist/index.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1 +1,189 @@
|
|
|
1
1
|
# astro-react-i18next
|
|
2
|
+
|
|
3
|
+
Integrates i18next and react-i18next seamlessly into your Astro website to provide robust i18n support for React components.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npx astro add astro-react-i18next
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Follow the prompts to install the necessary dependencies and add the required configuration to your Astro project.
|
|
12
|
+
|
|
13
|
+
You will see the following changes in your `astro.config.mjs` file:
|
|
14
|
+
|
|
15
|
+
```diff
|
|
16
|
+
import { defineConfig } from "astro/config";
|
|
17
|
+
import reactI18next from "astro-react-i18next";
|
|
18
|
+
|
|
19
|
+
export default defineConfig({
|
|
20
|
+
// ...
|
|
21
|
+
integrations: [
|
|
22
|
+
// ...
|
|
23
|
+
+ reactI18next(),
|
|
24
|
+
],
|
|
25
|
+
});
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Configuration
|
|
29
|
+
|
|
30
|
+
The initialization function accepts an optional configuration object with the following options:
|
|
31
|
+
|
|
32
|
+
| Option | Type | Description | Default |
|
|
33
|
+
| --------------------- | ---------- | ---------------------------------------------------------------------------------- | ------------ |
|
|
34
|
+
| `defaultLocale` | `string` | The default locale to use when no locale is specified. | `"en-US"` |
|
|
35
|
+
| `locales` | `string[]` | An array of locales to support. | `["en-US"]` |
|
|
36
|
+
| `defaultNamespace` | `string` | The default namespace to use when no namespace is specified. | `"common"` |
|
|
37
|
+
| `namespaces` | `string[]` | An array of namespaces to support. | `["common"]` |
|
|
38
|
+
| `prefixDefaultLocale` | `boolean` | Whether to prefix the default locale with the locale code. | `false` |
|
|
39
|
+
| `localesDir` | `string` | The directory where the locale files are stored, relative to the public directory. | `"locales"` |
|
|
40
|
+
|
|
41
|
+
Here is an example of how to configure the integration:
|
|
42
|
+
|
|
43
|
+
```diff
|
|
44
|
+
import { defineConfig } from "astro/config";
|
|
45
|
+
import reactI18next from "astro-react-i18next";
|
|
46
|
+
|
|
47
|
+
export default defineConfig({
|
|
48
|
+
// ...
|
|
49
|
+
integrations: [
|
|
50
|
+
// ...
|
|
51
|
+
- reactI18next(),
|
|
52
|
+
+ reactI18next({
|
|
53
|
+
+ defaultLocale: "en-US",
|
|
54
|
+
+ locales: ["en-US", "fr-FR", "zh-TW"],
|
|
55
|
+
+ defaultNamespace: "app",
|
|
56
|
+
+ namespaces: ["app"],
|
|
57
|
+
+ }),
|
|
58
|
+
],
|
|
59
|
+
});
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
It also supports `Server (SSR) Mode`, such as using the `@astrojs/node` adapter:
|
|
63
|
+
|
|
64
|
+
```diff
|
|
65
|
+
import { defineConfig } from "astro/config";
|
|
66
|
+
+import node from '@astrojs/node';
|
|
67
|
+
import reactI18next from "astro-react-i18next";
|
|
68
|
+
|
|
69
|
+
export default defineConfig({
|
|
70
|
+
// ...
|
|
71
|
+
integrations: [
|
|
72
|
+
// ...
|
|
73
|
+
reactI18next({
|
|
74
|
+
defaultLocale: "en-US",
|
|
75
|
+
locales: ["en-US", "fr-FR", "zh-TW"],
|
|
76
|
+
defaultNamespace: "app",
|
|
77
|
+
namespaces: ["app"],
|
|
78
|
+
}),
|
|
79
|
+
],
|
|
80
|
+
+ output: "server",
|
|
81
|
+
+ adapter: node({
|
|
82
|
+
+ mode: "standalone",
|
|
83
|
+
+ }),
|
|
84
|
+
});
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Locale Resources
|
|
88
|
+
|
|
89
|
+
Create locale files for each locale and namespace in the `localesDir` directory.
|
|
90
|
+
|
|
91
|
+
For example, create the following files:
|
|
92
|
+
|
|
93
|
+
```text
|
|
94
|
+
/
|
|
95
|
+
├── public/
|
|
96
|
+
│ └── locales/
|
|
97
|
+
│ ├── en-US/
|
|
98
|
+
│ │ └── common.json
|
|
99
|
+
│ ├── fr-FR/
|
|
100
|
+
│ │ └── common.json
|
|
101
|
+
│ └── zh-TW/
|
|
102
|
+
│ └── common.json
|
|
103
|
+
├── src/
|
|
104
|
+
└── package.json
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
The content of the `locales/en-US/common.json` file should look like this:
|
|
108
|
+
|
|
109
|
+
```json
|
|
110
|
+
{
|
|
111
|
+
"hello_world": "Hello World!"
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
## Dynamic Routes for Locales
|
|
116
|
+
|
|
117
|
+
To manage dynamic routes for each locale, create a root route named `[...locale]` in the `src` directory.
|
|
118
|
+
|
|
119
|
+
```text
|
|
120
|
+
/
|
|
121
|
+
├── public/
|
|
122
|
+
├── src/
|
|
123
|
+
│ └── [...locale]/
|
|
124
|
+
│ ├── ...
|
|
125
|
+
│ └── index.jsx
|
|
126
|
+
└── package.json
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
## Static Paths for Locales
|
|
130
|
+
|
|
131
|
+
To generate static paths for each locale in `Static (SSG) Mode`, use the `getStaticPaths` function in your Astro page file.
|
|
132
|
+
|
|
133
|
+
```js
|
|
134
|
+
---
|
|
135
|
+
import { buildStaticPaths } from "astro-react-i18next/utils";
|
|
136
|
+
|
|
137
|
+
export function getStaticPaths() {
|
|
138
|
+
return buildStaticPaths();
|
|
139
|
+
}
|
|
140
|
+
---
|
|
141
|
+
|
|
142
|
+
<html>
|
|
143
|
+
...
|
|
144
|
+
</html>
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
## Translating Content in Astro Components
|
|
148
|
+
|
|
149
|
+
Use the i18next instance to translate content in your Astro components.
|
|
150
|
+
|
|
151
|
+
```js
|
|
152
|
+
---
|
|
153
|
+
import i18next from "i18next";
|
|
154
|
+
---
|
|
155
|
+
|
|
156
|
+
<html lang={i18next.language}>
|
|
157
|
+
<p>{i18next.t("common:hello_world")}</p>
|
|
158
|
+
</html>
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
## Translating Content in React Components
|
|
162
|
+
|
|
163
|
+
Use the `useTranslation` hook to translate content in your React components.
|
|
164
|
+
|
|
165
|
+
```js
|
|
166
|
+
import { useTranslation } from "react-i18next";
|
|
167
|
+
|
|
168
|
+
export function MyComponent() {
|
|
169
|
+
const { t } = useTranslation();
|
|
170
|
+
return <p>{t("common:hello_world")}</p>;
|
|
171
|
+
}
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
## Utilities
|
|
175
|
+
|
|
176
|
+
The integration provides utility functions to help manage locales and translations.
|
|
177
|
+
|
|
178
|
+
All utility functions are available in the `astro-react-i18next/utils` module.
|
|
179
|
+
|
|
180
|
+
| Function | Description | Returns |
|
|
181
|
+
| -------------------------------------------------- | -------------------------------------------------------- | ---------------------------------------------------------------------------- |
|
|
182
|
+
| `getLocaleConfig()` | Returns the locale configuration object. | `{ defaultLocale: string, locales: string[], prefixDefaultLocale: boolean }` |
|
|
183
|
+
| `getLocalizedPathname(pathname = "", locale = "")` | Returns the localized pathname for the specified locale. | string |
|
|
184
|
+
| `buildStaticPaths()` | Generates static paths for each locale. | `{ params: { locale: string \| undefined; }; }[]` |
|
|
185
|
+
| `changeLocale(nextLocale = "", shallow = true)` | Changes the current locale. | |
|
|
186
|
+
|
|
187
|
+
## License
|
|
188
|
+
|
|
189
|
+
Licensed under the [MIT License](https://github.com/jeremyxgo/astro-react-i18next/blob/main/LICENSE).
|
package/dist/index.d.ts
CHANGED
|
@@ -15,5 +15,5 @@ declare module "i18next" {
|
|
|
15
15
|
astroReactI18next: MergedAstroReactI18nextOptions;
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
|
-
export default function AstroReactI18nextIntegration(options
|
|
18
|
+
export default function AstroReactI18nextIntegration(options?: AstroReactI18nextOptions): AstroIntegration;
|
|
19
19
|
export {};
|
package/package.json
CHANGED