astro-react-i18next 0.1.1 → 0.1.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 +17 -7
- package/dist/middleware-server.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,6 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
Integrates i18next and react-i18next seamlessly into your Astro website to provide robust i18n support for React components.
|
|
4
4
|
|
|
5
|
+
[](https://www.npmjs.com/package/astro-react-i18next)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Examples
|
|
9
|
+
|
|
10
|
+
| Example | |
|
|
11
|
+
| ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
12
|
+
| [SSG](https://github.com/jeremyxgo/astro-react-i18next/tree/main/examples/ssg) | [](https://stackblitz.com/github/jeremyxgo/astro-react-i18next/tree/main/examples/ssg?startScript=dev) |
|
|
13
|
+
| [SSR](https://github.com/jeremyxgo/astro-react-i18next/tree/main/examples/ssr) | [](https://stackblitz.com/github/jeremyxgo/astro-react-i18next/tree/main/examples/ssr?startScript=dev) |
|
|
14
|
+
|
|
5
15
|
## Installation
|
|
6
16
|
|
|
7
17
|
```bash
|
|
@@ -108,7 +118,7 @@ The content of the `locales/en-US/common.json` file should look like this:
|
|
|
108
118
|
|
|
109
119
|
```json
|
|
110
120
|
{
|
|
111
|
-
"hello_world": "Hello World!"
|
|
121
|
+
"hello_world": "Hello, World!"
|
|
112
122
|
}
|
|
113
123
|
```
|
|
114
124
|
|
|
@@ -128,7 +138,7 @@ To manage dynamic routes for each locale, create a root route named `[...locale]
|
|
|
128
138
|
|
|
129
139
|
## Static Paths for Locales
|
|
130
140
|
|
|
131
|
-
|
|
141
|
+
If you're using `Static (SSG) Mode`, static paths are required. You can easily generate them by using the `buildStaticPaths` utility function provided by this integration.
|
|
132
142
|
|
|
133
143
|
```js
|
|
134
144
|
---
|
|
@@ -146,15 +156,15 @@ export function getStaticPaths() {
|
|
|
146
156
|
|
|
147
157
|
## Translating Content in Astro Components
|
|
148
158
|
|
|
149
|
-
Use the i18next instance to translate content in your Astro components.
|
|
159
|
+
Use the `i18next` instance to translate content in your Astro components.
|
|
150
160
|
|
|
151
161
|
```js
|
|
152
162
|
---
|
|
153
|
-
import
|
|
163
|
+
import i18n from "i18next";
|
|
154
164
|
---
|
|
155
165
|
|
|
156
|
-
<html lang={
|
|
157
|
-
<p>{
|
|
166
|
+
<html lang={i18n.language}>
|
|
167
|
+
<p>{i18n.t("hello_world")}</p>
|
|
158
168
|
</html>
|
|
159
169
|
```
|
|
160
170
|
|
|
@@ -167,7 +177,7 @@ import { useTranslation } from "react-i18next";
|
|
|
167
177
|
|
|
168
178
|
export function MyComponent() {
|
|
169
179
|
const { t } = useTranslation();
|
|
170
|
-
return <p>{t("
|
|
180
|
+
return <p>{t("hello_world")}</p>;
|
|
171
181
|
}
|
|
172
182
|
```
|
|
173
183
|
|
|
@@ -34,10 +34,10 @@ async function onRequest(context, next) {
|
|
|
34
34
|
].find((locale) => locale && locales.includes(locale));
|
|
35
35
|
await i18n2.changeLanguage(nextLocale);
|
|
36
36
|
context.cookies.set("i18next", nextLocale || "", { path: "/" });
|
|
37
|
-
const { hash,
|
|
37
|
+
const { hash, pathname, search } = context.url;
|
|
38
38
|
const nextPathname = getLocalizedPathname(pathname, nextLocale);
|
|
39
39
|
if (nextPathname !== pathname) {
|
|
40
|
-
const nextUrl =
|
|
40
|
+
const nextUrl = nextPathname + search + hash;
|
|
41
41
|
return context.redirect(nextUrl);
|
|
42
42
|
}
|
|
43
43
|
return next();
|
package/package.json
CHANGED