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
  replace?: Record<string, string>
  forceTemporary?: Record<string, string>
  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.

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 { 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