Gatsby plugin to translate urls
MIT License
gatsby-plugin-translate-urls
is a Gatsby plugin to translate urls
You ave two choices:
You need to set the
defaultLocale
option
gatsby-plugin-translate-urls
from the NPM registry:yarn add gatsby-plugin-translate-urls
.js
or .json
)en.json
:
{
"urls.about": "about",
"urls.posts": "posts"
}
fr.json
:
{
"urls.about": "a-props",
"urls.posts": "articles"
}
gatsby-config.js
filemodule.exports = {
plugins: [
{
resolve: "gatsby-plugin-translate-urls",
options: {
translations: {
// import JS or JSON files
en: require("./src/translations/en.js"),
fr: require("./src/translations/fr.json"),
},
// OPTIONAL
// To remove the default locale from urls
defaultLocale: "en"
// prefix in translations files
prefix: "urls.", // default: ""
},
},
],
}
Most of the time, you only need the TranslatedLink
component. It will transform the url passed to to
prop.
import React from "react"
import {TranslatedLink} from "gatsby-plugin-translate-urls"
export default () => {
return <TranslatedLink to="/posts">Posts FR</TranslatedLink>
}
For most advanced cases or if you want to use the original gatsby
link, you can use TranslateUrlsContext
to get some useful data:
import React, {useContext} from "react"
import {Link} from "gatsby"
import {TranslateUrlsContext} from "gatsby-plugin-translate-urls"
export default () => {
const {
locale, // fr
locales, // ["en", "fr"]
originalUrl, // "/about"
translateUrl // (url(, locale)) => translatedUrl
} = useContext(TranslateUrlsContext)
return (
<>
<Link to={translateUrl(originalUrl)}>About FR</Link>
<Link to={translateUrl(originalUrl, "en")}>About EN</Link>
{"All localized /about pages:"}
{locales.map(lang => <Link key={lang}to={translateUrl(originalUrl, lang)}>About {lang}<)}
/Link>
</>
)
}
See CHANGELOG
This project is licensed under the MIT License - see the LICENCE file for details