Skip to content

Commit 675dbc9

Browse files
committed
update README.md
Signed-off-by: Dmitriy Nevzorov <[email protected]>
1 parent f4a0558 commit 675dbc9

File tree

1 file changed

+19
-15
lines changed

1 file changed

+19
-15
lines changed

README.md

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ or
2626
npm install --save gatsby-plugin-react-i18next
2727
```
2828

29-
### Add a plugin to your `gatsby-config.js`
29+
### Configure the plugin
3030

3131
```javascript
3232
// In your gatsby-config.js
@@ -62,7 +62,7 @@ For example,
6262
| [/locales/es/translation.json](/example/locales/es/translation.json) | Spanish |
6363
| [/locales/de/translation.json](/example/locales/de/translation.json) | German |
6464

65-
You can use different namespaces to organize your translations. Use the following file structure.
65+
You can use different namespaces to organize your translations. Use the following file structure:
6666

6767
```
6868
|-- language
@@ -81,11 +81,11 @@ The default namespace is `translation`
8181

8282
### Change your components
8383

84-
Use react i18next [`useTranslation`](https://react.i18next.com/latest/usetranslation-hook) hook and [`Trans`](https://react.i18next.com/latest/trans-component) component to translate your pages.
84+
Use react i18next [`useTranslation`](https://react.i18next.com/latest/usetranslation-hook) react hook and [`Trans`](https://react.i18next.com/latest/trans-component) component to translate your pages.
8585

8686
`gatsby-plugin-react-i18next` exposes all [`react-i18next`](https://react.i18next.com/) methods and components.
8787

88-
Replace Gatsby `Link` component with the `Link` component exported from `gatsby-plugin-react-i18next`
88+
Replace [Gatsby `Link`](https://www.gatsbyjs.org/docs/gatsby-link) component with the `Link` component exported from `gatsby-plugin-react-i18next`
8989

9090
```javascript
9191
import React from 'react';
@@ -133,7 +133,7 @@ and in `locales/en/translations.json` you will have
133133
}
134134
```
135135

136-
This example is not using semantic keys (eg `i18nKey`) e.g. the entire message will be used as a key. [Read more](https://www.i18next.com/principles/fallback#key-fallback).
136+
This example is not using semantic keys instead the entire message will be used as a key. [Read more](https://www.i18next.com/principles/fallback#key-fallback).
137137

138138
### Changing the language
139139

@@ -189,7 +189,9 @@ const Header = ({siteTitle}) => {
189189

190190
## API
191191

192-
### `Link` component - is identical to [Gatsby Link component](https://www.gatsbyjs.org/docs/gatsby-link/) expept that you can provide additional `language` prop to create a link to a page with different language
192+
### `Link` component
193+
194+
`Link` component is identical to [Gatsby Link component](https://www.gatsbyjs.org/docs/gatsby-link/) except that you can provide additional `language` prop to create a link to a page with different language
193195

194196
```javascript
195197
import {Link} from 'gatsby-plugin-react-i18next';
@@ -211,20 +213,22 @@ const context = React.useContext(I18nextContext);
211213

212214
Content of the context object
213215

214-
Attribute | Type | Description
215-
language | string | current language
216-
languages | string[] | supported language keys
217-
routed | boolean | if `false` it means that the page is in default language
218-
defaultLanguage | string | default language provided in plugin options
219-
originalPath | string | page path in default language
216+
| Attribute | Type | Description |
217+
| --------------- | -------- | -------------------------------------------------------- |
218+
| language | string | current language |
219+
| languages | string[] | supported language keys |
220+
| routed | boolean | if `false` it means that the page is in default language |
221+
| defaultLanguage | string | default language provided in plugin options |
222+
| originalPath | string | page path in default language |
220223

221224
### `useI18next` react hook
222225

223226
This hook returns `I18nextContext`, object and additional helper functions
224227

225-
Function | Description
226-
navigate | This is a wrapper around [Gatsby navigate helper function](https://www.gatsbyjs.org/docs/gatsby-link/#how-to-use-the-navigate-helper-function) that will navigate to the page in selected language
227-
changeLanguage | A helper function to change language. The first parameter is a language code. Signature: `(language: string, to?: string, options?: NavigateOptions) => Promise<void>'. You can pass additional parameters to navigate to different page.
228+
| Function | Description |
229+
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
230+
| navigate | This is a wrapper around [Gatsby navigate helper function](https://www.gatsbyjs.org/docs/gatsby-link/#how-to-use-the-navigate-helper-function) that will navigate to the page in selected language |
231+
| changeLanguage | A helper function to change language. The first parameter is a language code. Signature: `(language: string, to?: string, options?: NavigateOptions) => Promise<void>'. You can pass additional parameters to navigate to different page. |
228232

229233
`useI18next` also exposes the output of react i18next [`useTranslation`](https://react.i18next.com/latest/usetranslation-hook) so you can use
230234

0 commit comments

Comments
 (0)