useTranslation (hook)
What it does
It gets the t
function and i18n
instance inside your functional component.
While most of the time you only need the t
function to translate your content, you can also get the i18n instance (in order to change the language).
The useTranslation
hook will trigger a Suspense if not ready (eg. pending load of translation files). You can set useSuspense
to false if prefer not using Suspense.
When to use?
Use the useTranslation
hook inside your functional components to access the translation function or i18n instance.
In this tutorial you'll find some ways on how to use this useTranslation hook.
You'll also see how to use it when you need to work with multiple namespaces.
useTranslation params
Loading namespaces
Overriding the i18next instance
Optional keyPrefix option
available in react-i18next version >= 11.12.0
depends on i18next version >= 20.6.0
Do not use the keyPrefix
option if you want to use keys with prefixed namespace notation:
i.e.
Optional lng option
available in react-i18next version >= 12.3.1
Not using Suspense
Not using Suspense you will need to handle the not ready state yourself by eg. render a loading component as long !ready
. Not doing so will result in rendering your translations before they loaded which will cause save missing be called although translations exists (just yet not loaded).
Last updated