Detecting the Currently selected locale
How to detect the currently selected locale so that you can use it in your React components.
To detect the currently selected locale from the client, you can use the useTranslation
hook from react-i18next
.
import { useTranslation } from 'react-i18next';function Component() { const { i18n } = useTranslation(); const { language } = i18n; // use language here}
Detecting the locale from the server
When rendering on the server, you can use the getLanguageCookie
object to detect the locale. This value represents the locale that was selected by the user.
NB: it can be null if the user has not selected a locale yet or if the user has never selected a locale. In this case, you should use the default locale.
import getLanguageCookie from '~/i18n/get-language-cookie';import configuration from '~/configuration';function ServerComponent() { const locale = getCurrentLocale(); // use locale here}function getCurrentLocale() { return getLanguageCookie() ?? configuration.site.locale;}