getTranslation()

The getTranslation function returns translated text for use outside of JSX components. It's perfect for scenarios where you need translated strings for component props, function returns, or any JavaScript context where the I18nKeylessText component cannot be used.

It is a plain function, not a hook: it reads the store at call time, so it also works outside components (route loaders, utilities) once init has run. The flip side is that it is not reactive — see the Notes below for how to make a component re-render when the translation arrives.

Inside a component, prefer useTranslation(): same options, same result, but it subscribes for you and is correct under SSR.

Function Signature

getTranslation(
  text: string,
  options?: {
    context?: string;
    namespace?: string;
    unpersistedNamespace?: boolean;
    replace?: Record<string, string>;
    forceTemporary?: Record<string, string>;
    originLanguage?: Lang;
    debug?: boolean;
  }
): string

Parameters

text

type: string (required)

The text to be translated. This text serves as both the display content and the translation key.

options

type: object (optional)

Configuration object with the following optional properties:

context

type: string (optional)

Additional context to help ensure accurate translations. Useful when the same text might have different meanings in different situations.

namespace

type: string (optional)

Fetch/storage partition this translation belongs to, so the app downloads and persists only the slice it renders (fixes the storage quota error). Defaults to defaultNamespace from init(), or "default". See the Namespaces guide.

unpersistedNamespace

type: boolean (optional)

When true, the namespace's translations live in memory only — never written to storage or reloaded at boot. Use for high-cardinality, transient namespaces (e.g. one per discussion).

replace

type: Record<string, string> (optional)

Object for replacing placeholders in the text with dynamic values. Common patterns: {name}, [value], %user%, etc.

forceTemporary

type: Record<string, string> (optional)

Object to override AI-generated translations with custom ones for specific languages.

originLanguage

type: Lang (optional)

The language the text is written in when it differs from your primary language — i.e. user generated content (UGC). The backend translates it into the primary language, keeps the raw text verbatim for viewers in that language, and AI-translates all the others. When the current language is the origin language, the text renders as-is with no API call. See the UGC guide.

debug

type: boolean (optional)

Enable console logging for debugging translation behavior.

Basic Usage

Simple Text

import { getTranslation } from "i18n-keyless-react";

export default function Navigation() {
  return (
    <HomeTabs.Navigator>
      <HomeTabs.Screen
        options={{ tabBarLabel: getTranslation("Welcome") }}
        name="WELCOME"
      />
    </HomeTabs.Navigator>
  );
}

With Context

import { getTranslation } from "i18n-keyless-react";

export default function MyComponent() {
  const buttonText = getTranslation("Back", { 
    context: "This is a back button" 
  });
  
  return (
    <button title={buttonText}>
      ←
    </button>
  );
}

With Replacements

import { getTranslation } from "i18n-keyless-react";

export default function UserGreeting({ user }) {
  const greeting = getTranslation("Hello {name}!", { 
    replace: { '{name}': user.name } 
  });
  
  return (
    <input placeholder={greeting} />
  );
}

Force Translation

import { getTranslation } from "i18n-keyless-react";

export default function MyComponent() {
  const text = getTranslation("Retour", { 
    forceTemporary: { en: "Back" } 
  });
  
  return (
    <button aria-label={text}>
      ←
    </button>
  );
}

Common Use Cases

• Component props: Setting translated text for placeholder, title, aria-label, etc.
• Tab labels: Providing translated labels for navigation tabs
• Dynamic content: When you need the translated string in JavaScript logic
• Form validation: Generating translated error messages
• Accessibility: Setting translated ARIA labels and descriptions

Notes

• The function returns a string, not a React component
• It automatically uses the current language from the i18n-keyless store
• It's a plain function, not a hook — it reads the store at call time and is not reactive. A component that only calls getTranslation won't re-render when the translation arrives or the language changes: subscribe in that component with useCurrentLanguage() and/or useI18nKeyless((s) => s.translations)
• For displaying text in JSX, prefer using the I18nKeylessText component instead (it subscribes for you)
• For a string inside a component — a placeholder, a title — prefer useTranslation() (it subscribes for you too)