## Introduction The `Trans` component is one of the most powerful features in react-i18next. While the `t()` function works great for simple strings, `Trans` allows you to embed React components and HTML elements directly in your translations. This guide covers everything from basic usage to advanced patterns with the Trans component. ## Prerequisites - React project with react-i18next configured - Understanding of basic i18next translation - Familiarity with JSX ## Why Use the Trans Component? The `t()` function has limitations when dealing with: 1. **Bold or italic text** within translations 2. **Links** that need React Router or custom components 3. **Complex HTML structures** with proper semantics 4. **React components** embedded in text The Trans component solves all these problems elegantly. ## Basic Trans Component Usage ### Simple HTML Elements ```json // en.json { "welcome": "Welcome to our app!" } ``` ```jsx import { Trans } from 'react-i18next'; function Welcome() { return ( }} /> ); } // Output: Welcome to our app! ``` ### Multiple Elements ```json { "description": "This is important and urgent." } ``` ```jsx , italic: }} /> ``` ### Numbered Tags (Legacy Syntax) You can also use numbered tags: ```json { "message": "Click <0>here to <1>continue" } ``` ```jsx , ]} /> ``` ## Handling Links ### External Links ```json { "terms": "Read our Terms of Service" } ``` ```jsx }} /> ``` ### React Router Links ```json { "navigation": "Go to Home or About" } ``` ```jsx import { Link } from 'react-router-dom'; , aboutLink: }} /> ``` ### Links with Icons ```json { "docs": "Check the documentation " } ``` ```jsx , icon: }} /> ``` ## Combining Trans with Variables ### Variables in Trans ```json { "greeting": "Hello {{name}}, welcome back!" } ``` ```jsx }} /> // Output: Hello John, welcome back! ``` ### Dynamic Content ```json { "notification": "You have {{count}} new messages" } ``` ```jsx function Notifications({ count }) { return ( }} /> ); } ``` ## Nested Components ### Complex Nesting ```json { "info": "For help, contact support or check the FAQ" } ``` ```jsx , bold: , faq: }} /> ``` ### Self-Closing Tags ```json { "break": "Line one
Line two" } ``` ```jsx }} /> ``` ### Icons in Text ```json { "status": " Verified account" } ``` ```jsx }} /> ``` ## Pluralization with Trans ### Basic Plurals ```json { "items": "{{count}} item", "items_plural": "{{count}} items" } ``` ```jsx }} /> // Output: 5 items ``` ### Complex Plural Forms ```json { "cart": { "empty": "Your cart is empty", "one": "You have 1 item in your cart", "other": "You have {{count}} items in your cart" } } ``` ```jsx function CartSummary({ itemCount }) { const key = itemCount === 0 ? 'cart.empty' : itemCount === 1 ? 'cart.one' : 'cart.other'; return ( }} /> ); } ``` ## Advanced Patterns ### Conditional Components ```json { "premium": "Upgrade to for exclusive features" } ``` ```jsx function UpgradePrompt({ isPremium }) { return ( Premium : }} /> ); } ``` ### Component with Props ```json { "user": "Logged in as {{username}}" } ``` ```jsx function UserStatus({ user }) { return ( , name: }} /> ); } ``` ### Forms in Translations ```json { "newsletter": "Subscribe to updates: " } ``` ```jsx function Newsletter() { const [email, setEmail] = useState(''); return ( setEmail(e.target.value)} className="border rounded px-2" />, button: