getTranslation()

The getTranslation function is a React hook that 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.

Function Signature

getTranslation(
  text: string,
  options?: {
    context?: string;
    replace?: Record<string, string>;
    forceTemporary?: Record<string, string>;
    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.

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.

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
• Must be used within a React component (it's a hook)
• For displaying text in JSX, prefer using the I18nKeylessText component instead