I18nKeylessText

The I18nKeylessText component is the primary translation component for React applications using i18n-keyless. It wraps text content and automatically handles translation using the text itself as the key.

Component Signature

<I18nKeylessText 
  context?: string
  namespace?: string
  unpersistedNamespace?: boolean
  replace?: Record<string, string>
  forceTemporary?: Record<string, string>
  originLanguage?: Lang
  debug?: boolean
>
  {children}
</I18nKeylessText>

Props

children

type: React.ReactNode (required)

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

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 { I18nKeylessText } from "i18n-keyless-react";

function WelcomeMessage() {
  return (
    <div>
      <h1>
        <I18nKeylessText>Welcome to our website!</I18nKeylessText>
      </h1>
      <button>
        <I18nKeylessText>Sign Up</I18nKeylessText>
      </button>
    </div>
  );
}

With Context

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

function ContextualTranslations() {
  return (
    <div>
      {/* "Close" in the context of a dialog */}
      <button>
        <I18nKeylessText context="dialog action">Close</I18nKeylessText>
      </button>
      
      {/* "Close" in the context of proximity */}
      <p>
        <I18nKeylessText context="distance">
          The store is very close to here.
        </I18nKeylessText>
      </p>
    </div>
  );
}

With Placeholders

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

function UserGreeting({ user }) {
  return (
    <h1>
      <I18nKeylessText replace={{ '{name}': user.name }}>
        Hello {name}!
      </I18nKeylessText>
    </h1>
  );
}

Usage Notes

• Initialization Required: Ensure I18nKeyless.init() is called before using I18nKeylessText
• Text as Key: The component uses the text content as the translation key
• Automatic Translation: Missing translations are generated using AI and cached locally
• Network Dependency: First-time translations require internet connectivity

Related

• I18nKeyless.init() - Initialize the library
• Types - Type definitions