In this article we will implement i18n (Internationalization) to a Gatsby site using react-intl and React context API, we will only cover English and Arabic in this article but you could add more languages if you wish to, before we get started, let’s first of all plan how we want to implement it.
1- Detect the user’s default language
2- Automatically switch the language, direction of content and the font family depending on the user’s default language
3- The user still can choose their preferred language
Let’s start by generating a new Gatsby site using their CLI tool
Then we will install the libraries we need (I’m using 'yarn' but feel free to use 'npm')
I’m installing recompose too to separate logic from the component and keep the code clean (Feel free not to use it but We highly recommend it), as well as styled-components beta v4 to handle css in js (Feel free not use it too but We highly recommend it) and a simple google fonts gatsby plugin 'gatsby-plugin-google-fonts'
Before we start, let’s first structure the files in a better way like down below
Let’s start by creating context inside Context component and have 'en' as the default value.
Now let’s get to the Provider component that passes the global state to the Consumers that are descendants of it.
Provider is a React component that allows Consumers to subscribe to context changes.
This will wrap all our components so that we can access the value which contains 'lang' and a function to toggle the language called 'toggleLanguage' and below the component is the logic.
We initialized 'lang' with a default value of 'en', but that can change when the component mounts, we check if localStorage is available, if true: we assign its value to lang state, else: we detect the user’s browser’s default language and split the value to get the first item that contains the language.
Now move on to the 'Layout' component where:
we will import both english and arabic json data
along with the 'IntlProvider' to wrap the content where we will be using 'react-intl' built in components
as well as importing 'Context' and wrap our content with its Consumer so we can access the global state
finally wrapping everything by 'Provider' we created above.
We forgot to mention that we used the 'Global' component just to handle the font change, so it will be 'Roboto' when the language is set to english and 'Cairo' when it is set to arabic.
Now that everything to make it work is ready, let’s add a button to the header to toggle the language
We separated the button that changes the language alone so we can understand it well
We imported 'Context' once again in this file so we can use its 'Consumer' so we get the global state. Now when the button is clicked, the'toggleLanguage' function changes the 'lang' value.
Before we get the Gatsby config file, let’s take care of the direction of content as well by accessing the 'lang' value from the consumer of context and conditionally check if it’s arabic, if true the direction must become 'rtl', else 'lrt'.
You could include all the meta tags, opengraph, structured data and Twitter tags in this 'Head' component like I did in the gatsby-i18n-starter
Finally let’s include the plugins we’re using into the 'gatsby-config.js' file and let’s prepare some dummy pages with some messages that support i18n.
And here is both the json files that contain the messages we’re using in this example: