Gatsby plugin that wraps react-i18next and supports localized urls.
npm i -S @dontepsu/gatsby-plugin-awesome-i18next i18next react-i18next
To use to the plugin, you need to define the translations in a JSON file and add config object to gatsby.config.js.
In gatsby-config define following configuration to the plugin.
{
resolve: `gatsby-plugin-awesome-i18next`,
options: {
availableLngs: ['en', 'fi'],
fallbackLng: 'en',
siteUrl: 'https://www.example.com/',
},
In the project root add the translations JSON files as follows:
root
- locales
- en
messages.json
my-namespace.json
- fi
messages.json
my-namespace.json
these translation will be available in the Gatsbys GraphQL.
export const query = graphql`
query($lng: String!) {
locales: allLocale(filter: { lng: { eq: $lng }, ns: { regex: "/messages|my-namespace/i" } }) {
...LocaleFragment
}
}
`;
export default withI18next(MyPageComponent, {
// optional hook
afterI18nInit: (18next => doSomethingAfteInit(i18next),
});
This plugin is designed to be used with useTranslation-hook. For more information please refer to React-i18next documentation.
This plugin exports an extended version of useTranslation-hook.
import { useTranslation } from 'gatsby-plugin-awesome-i18next';
const Component = () => {
const {
t,
i18n,
context,
resolvePath,
resolveAllLanguageVersions,
changeLang
} = useTranslation([ 'my-namespace' ]);
return <h1>{t('my-namespace:Component.hello')}</h1>;
}
Feature to enable url localization. URL localization will be done in gatsby-node.onCreatePage hook. Developer should not worry about hanlding the localzied url when creating linking within pages in Gatsby project.
The urls
{
resolve: `gatsby-plugin-awesome-i18next`,
options: {
availableLngs: ['en', 'fi'],
fallbackLng: 'en',
siteUrl: 'https://www.example.com/',
localizedPaths: {
'/about/': {
fi: '/tietoja/',
},
'/products/:slug/': {
fi: '/tuotteet/:slug',
},
/products/:slug/subsite': {
fi: '/tuotteet/:slug/subsite',
},
},
},
},
{
resolve: `gatsby-plugin-awesome-i18next`,
options: {
availableLngs: ['en', 'fi'],
fallbackLng: 'en',
siteUrl: 'https://www.example.com/',
localizedPaths: {
'/about/': {
fi: '/tietoja/',
},
'/products/:slug/': {
fi: '/tuotteet/:slug',
},
/products/:slug/subsite': {
fi: '/tuotteet/:slug/subsite',
},
},
pathParametersLocalizations: {
':slug': {
'chocolates': {
fi: 'suklaat',
}
}
}
},
},
Ignore paths that you don't want this plugin to process. You can use one of the following:
- Set of strings
{
resolve: `gatsby-plugin-awesome-i18next`,
options: {
availableLngs: ['en', 'fi'],
fallbackLng: 'en',
siteUrl: 'https://www.example.com/',
ignorePaths: new Set([
'/oauth-callback/',
])
},
},
- Array of string
{
resolve: `gatsby-plugin-awesome-i18next`,
options: {
availableLngs: ['en', 'fi'],
fallbackLng: 'en',
siteUrl: 'https://www.example.com/',
ignorePaths: [
'/oauth-callback/',
]
},
},
- function => boolean
{
resolve: `gatsby-plugin-awesome-i18next`,
options: {
availableLngs: ['en', 'fi'],
fallbackLng: 'en',
siteUrl: 'https://www.example.com/',
ignorePaths: page => page.path.substr(0, path.length - 1) === '/oauth-callback'
},
},
Plugin exports a <Link /> component that takes a non localized url as props.to
import { Link } from 'gatsby-plugin-awesome-i18next';
const LinkComponent = () => {
return <Link to="/about/">{t('my-namespace:LinkComponent.about_link')}</Link>;
}
If you use localized paths, the default language url will be automatically translated to localized url.
- Kodit.io - Europes #1 real estate instant buyer
- Ignore paths: Specify routes that you want this plugin to ignore
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent