useTranslation

React hook to access translation function in Client Components

🎮Interactive Demo

Translation Key:

Result:

Welcome

💡 Try: Welcome, Getting Started, CLI Tools, etc.

Overview

useTranslation is a React hook that provides access to the translation function (t) and current language state. It can only be used in Client Components.

✓Simple API with t() function

✓Automatic re-rendering on language change

✓Fallback to key if translation missing

✓Type-safe with TypeScript

API Reference

Return Value

t(key: string): string

Translation function that returns the translated string for the given key.

const { t } = useTranslation();
const welcomeText = t("Welcome"); // "환영합니다" or "Welcome"

currentLanguage: string

The currently active language code.

const { currentLanguage } = useTranslation();
console.log(currentLanguage); // "ko" or "en"

Usage Examples

Basic Usage

"use client";

import { useTranslation } from "i18nexus";

export default function Welcome() {
  const { t } = useTranslation();
  
  return (
    <div>
      <h1>{t("Welcome")}</h1>
      <p>{t("This is a simple example")}</p>
    </div>
  );
}

Dynamic Translation Keys

"use client";

import { useTranslation } from "i18nexus";

export default function StatusMessage({ status }) {
  const { t } = useTranslation();
  
  // Dynamically construct translation keys
  const message = t(\`status.\${status}\`);
  
  return <div>{message}</div>;
}

// Translations:
// "status.success": "작업이 성공했습니다"
// "status.error": "오류가 발생했습니다"
// "status.pending": "처리 중입니다"

Displaying Current Language

"use client";

import { useTranslation } from "i18nexus";

export default function LanguageDisplay() {
  const { t, currentLanguage } = useTranslation();
  
  return (
    <div>
      <p>{t("Current language")}: {currentLanguage}</p>
      <p>{t("Welcome to our app")}</p>
    </div>
  );
}

Real-World Example

"use client";

import { useTranslation } from "i18nexus";

interface Product {
  id: string;
  nameKey: string;
  price: number;
}

export default function ProductCard({ product }: { product: Product }) {
  const { t } = useTranslation();
  
  return (
    <div className="product-card">
      <h2>{t(product.nameKey)}</h2>
      <p className="price">
        {t("Price")}: ${product.price}
      </p>
      <button>
        {t("Add to cart")}
      </button>
    </div>
  );
}

Best Practices

✅Do: Use descriptive keys

Use clear, descriptive translation keys that indicate the content.

// Good
t("user.profile.edit.button")
t("error.network.timeout")

// Avoid
t("btn1")
t("msg")

✅Do: Handle missing translations gracefully

i18nexus automatically returns the key if translation is missing, making debugging easier.

❌Don't: Use in Server Components

useTranslation is a client-side hook. For Server Components, use createServerTranslation().

// ❌ Wrong - Server Component
export default async function Page() {
  const { t } = useTranslation(); // Error!
}

// ✅ Correct - Client Component
"use client";
export default function Page() {
  const { t } = useTranslation(); // Works!
}

❌Don't: Construct keys with complex logic

Keep translation key logic simple and predictable.