Detect current 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() ??; }

Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS