Internationalization (i18n) Demo
Enterprise-grade multi-language support with automatic currency and date formatting
Current Locale
Active language and regional settings
Flag
🇺🇸
Language
English
Currency
USD
Date Format
MM/DD/YYYY
Translation Examples
Common UI strings in current language
Common Buttons
Product Labels
Select Color: Blue
Select Size: Medium
Quantity: 2
Cart Translations
Your Cart
Subtotal
Shipping
Total
Checkout Flow
Shipping Address
Payment Details
Review Order
Place Order
Currency Formatting
Automatic locale-based currency display
Price (2999 cents)
$29.99
Subtotal (12999 cents)
$129.99
Total (45999 cents)
$459.99
Number Formatting
Locale-specific number display
Large Number
1,234,567.89
Percentage
15.34%
Compact
1.5M
Date Formatting
Regional date and time formats
Short Format
Feb 4, 2026
Long Format
Wednesday, February 4, 2026
Relative Time
Yesterday: yesterday
3 days ago: 3 days ago
Pluralization
Intelligent plural forms
0 items
1 item
2 items
5 items
1 day ago
2 days ago
3 days ago
7 days ago
Error Messages
Localized validation and error messages
This field is required
Please enter a valid email address
Payment failed. Please try again.
This item is out of stock
Implementation
How to use i18n in your components
1. Import the hook:
import { useI18n } from '@fanbace/i18n';2. Use in your component:
const { t, formatCurrency } = useI18n();
return (
<button>{t('common.add_to_cart')}</button>
<span>{formatCurrency(2999)}</span>
);3. Switch locale:
Use the locale switcher in the sidebar (top)