useTranslation()
Use the useTranslation() hook to translate text outside of a component wrapper.
Usage
The useTranslation() hook is helpful for translating text when you can’t rely on a component wrapper.
Simply provide the string you want to translate as the first argument of the hook to translate it.
You can also provide additional options as the second argument to adjust how translations are handled (the same way you can control translations in the <TranslatedText /> component).
For example, this hook could be useful when translating one of the properties you are using in another component (like a screen title).
import { useTranslation } from '@lexiconjs/react'
import { Tabs } from 'expo-router'
import React from 'react'
export default function TabLayout() {
return (
<Tabs>
<Tabs.Screen
name="index"
options={{
title: useTranslation('Track', { context: 'Track my progress' }).translation,
}}
/>
<Tabs.Screen
name="profile"
options={{
title: useTranslation('Profile').translation,
}}
/>
</Tabs>
)
}
Response
This hook returns several fields.
The translation of the provided input string.
If the translation fails, it will fall back to the original string that was provided.
Provides the result status of the translation as a string.
Possible values: “loading” | “success” | “error”
Whether the translation is currently loading.
Whether the translation was successful.
Whether the translation experienced an error.
In this scenario, the translation field will fall back to the original string that was provided.
Options
This hook accepts various secondary options.
Any additional context/guidance that you would like to provide to the translator.
This is most commonly used when you are translating a single word that can be interpreted in multiple different ways. However, it can also be useful if you want to slightly tweak how translations are being generated.
For example, you can provide the context “Track my progress” when the child string is “Track”.
Whether to disable the translation of the string within the useTranslation().
You probably won’t use this option as much on the useTranslation() hook as you would on the <TranslatedText /> component.
The current locale of the text we’d like to translate (the language you wrote the app in).
You should almost never provide this prop because it is set based on the defaultLanguage prop provided to the <TranslationProvider />.
Example: en-US
The locale we would like to translate the text to.
You should almost never provide this prop because it is set based on the targetLanguage prop provided to the <TranslationProvider /> (which defaults to the user’s detected locale).
Example: es-ES