Translation#

A hook for translating text on-device for inline display.

Translating text#

const langPrefs = useLanguagePrefs()
const {translate} = useTranslate({key: post.uri})

// ...

void translate({
  text: record.text,
  targetLangCode: langPrefs.primaryLanguage,
})

Clearing/hiding a translation#

const {clearTranslation} = useTranslate({key: post.uri})

// ...

clearTranslation()

Rendering a translation#

const {translationState} = useTranslate({key: post.uri})

// ...

switch (translationState.status) {
  case 'idle':
    // Default state; render a link that calls `translate`.
    break;
  case 'loading':
    // On-device translation is in progress; render a loading spinner.
    break;
  case 'success':
    // Translation complete; render `translationState.translatedText` and a link
    // that calls `clearTranslation`.
    break;
  case 'error':
    // On-device translation failed; render `translationState.message` and a
    // link to `translate` from `useGoogleTranslate` as a fallback.
    break;
}

Notes#

• Android only supports two-letter language codes.
  • For example, this means it doesn’t differentiate between pt-BR and pt-PT.
• Android and iOS only support a subset of the language options we offer (iOS supports fewer than Android).
• Individual language packs must be downloaded on iOS.