i18next - Demo Website
Languages
1. Basic Translation
Example implementation:
Source Code:
// JavaScript
i18next.init({
lng: 'pl',
resources: {
en: { translation: { greeting: "Hello, user!", farewell: "See you soon!" } },
pl: { translation: { greeting: "Witaj, użytkowniku!", farewell: "Do zobaczenia!" } }
}
}, function(err, t) {
document.getElementById('output').innerText = t('greeting');
});
<!-- HTML -->
<div id="output"></div>
Explanation of the Code:
1. i18next.init(): Ta funkcja inicjalizuje i18next i akceptuje dwa argumenty: obiekt konfiguracyjny i funkcję zwrotną.
2. lng: 'pl': Ustawia domyślny język na polski.
3. resources: Zawiera zasoby tłumaczeń dla każdego języka, gdzie definiujemy klucze tłumaczeń. W tym przypadku mamy powitania i pożegnania dla języka angielskiego i polskiego.
4. Funkcja zwrotna: Jest wywoływana po zakończeniu inicjalizacji. Używamy metody t('greeting'), aby uzyskać przetłumaczony tekst powitania, a następnie wyświetlamy go w elemencie HTML o id output.
2. Interpolation
Example implementation:
Source Code:
/ en.json
{
"welcome_user": "Welcome, {{name}}!",
"age_message": "You are {{age}} years old."
}
// JavaScript
document.getElementById('output').innerText = i18next.t('welcome_user', { name: 'New user' });
document.getElementById('output_age').innerText = i18next.t('age_message', { age: 25 });
<!-- HTML -->
<div id="output"></div>
<div id="output_age"></div>
Explanation of the Code:
1. i18next.t('welcome_user', { name: 'Nowy użytkownik' }): Ta funkcja tłumaczy tekst na podstawie klucza welcome_user i wykonuje interpolację, zastępując placeholder {{name}} wartością 'Nowy użytkownik'.
2. i18next.t('age_message', { age: 25 }): Ta funkcja tłumaczy tekst na podstawie klucza age_message, a placeholder {{age}} jest zastępowany wartością 25.
3. resources: Zawiera zasoby tłumaczeń, w tym klucz welcome_user, który ma wartość “Witaj, {{name}}!” oraz klucz age_message, który brzmi “Masz {{age}} lat.” Te wartości zawierają placeholdery, które będą zastąpione rzeczywistymi danymi.
3. Pluralization
Example implementation:
Source Code:
/ en.json
{
"items": "You have {{count}} item.",
"items_other": "You have {{count}} items."
}
/ pl.json
{
"items": "Masz {{count}} przedmiot.",
"items_few": "Masz {{count}} przedmioty.",
"items_many": "Masz {{count}} przedmiotów.",
"items_other": "Masz {{count}} przedmiotów." ,
}
// JavaScript
document.getElementById('output_items').innerText = i18next.t('items', { count: 1 });
document.getElementById('output_items_plural').innerText = i18next.t('items', { count: 5 });
<!-- HTML -->
<div id="output_items"></div>
<div id="output_items_plural"></div>
Explanation of the Code:
1. i18next.t('items', { count: 1 }): Ta funkcja tłumaczy tekst na podstawie klucza items i obsługuje formy pojedyncze, zastępując placeholder {{count}} wartością 1.
2. i18next.t('items_other', { count: 2 }): Ta funkcja tłumaczy tekst na podstawie klucza items_other i obsługuje formy mnogie, zastępując placeholder {{count}} wartością 2.
3. resources: Zawiera zasoby tłumaczeń, w tym klucz items, który ma wartość “Masz {{count}} przedmiot.” oraz klucz items_other, który brzmi “Masz {{count}} przedmioty.”.
4. Formatting
Example implementation:
Source Code:
// en.json
{
"currency": "Your balance is {{amount}}.",
"date": "Today is {{date}}.",
}
// pl.json
{
"currency": "Twoje saldo wynosi {{amount}}.",
"date": "Dziś jest {{date}}.",
}
// JavaScript
const amount = 1234.56;
const date = new Date(); // Example date
const userLocale = i18next.language || 'en-US';
document.getElementById('output_date').innerText =
i18next.t('date', {
date: new Intl.DateTimeFormat(userLocale).format(date)
});
document.getElementById('output_currency').innerText =
i18next.t('currency', {
amount: new Intl.NumberFormat(userLocale, { style: 'currency', currency: 'USD' }).format(amount)
});
<!-- HTML -->
<div id="output_currency"></div>
<div id="output_date"></div>
Explanation of the Code:
1. const amount = 1234.56; and const date = new Date();: These variables represent a sample amount (currency) and date to be formatted for localization.
2. const userLocale = i18next.language || 'en-US';: This retrieves the user's language setting from i18next, defaulting to 'en-US' if detection fails.
3. date formatting with Intl.DateTimeFormat(userLocale).format(date): This formats the date according to the user's locale and passes it to i18next's translation function to dynamically update the text.
4. currency formatting with Intl.NumberFormat(userLocale, { style: 'currency', currency: 'USD' }).format(amount): This formats the amount as currency using the user's locale and specified currency (USD), passing it to the i18next translation function.
5. Updating HTML: document.getElementById('output_date').innerText and document.getElementById('output_currency').innerText dynamically display the translated and formatted values in specified elements on the webpage.
5. Language Detection
Example implementation:
Source Code:
// en.json
{
"detected_language_message": "The detected language is {{lang}}.",
}
// JavaScript
const langDetec = i18next.language;
document.getElementById('detected_language').innerText = i18next.t('detected_language_message', { lang: langDetec });
<!-- HTML -->
<div id="detected_language"></div>
Explanation of the Code:
1. i18next.detectLanguage(): This function detects the user's language.
2. document.getElementById(‘detected_language’).innerText: This method displays the detected language message in the HTML element with id detected_language.