​
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.

translation
string

The translation of the provided input string.

If the translation fails, it will fall back to the original string that was provided.

status
string

Provides the result status of the translation as a string.

Possible values: “loading” | “success” | “error”

isLoading
boolean

Whether the translation is currently loading.

isSuccess
boolean

Whether the translation was successful.

isError
boolean

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.

context
string

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”.

disableTranslation
boolean
default: "false"

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.

from
string

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

to
string

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

<TranslatedText />useTranslator()