An Interest In:
Web News this Week
- April 27, 2024
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
svelte-i18next
Presenting the svelte wrapper for i18next.
This library, based on i18next, wraps an i18next instance inside a svelte store and observes the i18next events like languageChanged
, resource added
, etc. to be able to render our svelte components.
Package:
GitHub:
NishuGoel / svelte-i18next
Internationalization for svelte framework. Based on i18next ecosystem
svelte-i18next
Svelte wrapper for i18next
npm i svelte-i18next i18next
Implementation
This library wraps an i18next instance in a Svelte Store to observe i18next eventsso your Svelte components re-render e.g. when language is changed or a new resource is loaded by i18next.
Quick Start
i18n.js
:
import i18next from "i18next";import { createI18nStore } from "svelte-i18next";i18next.init({ lng: 'en', resources: { en: { translation: { "key": "hello world" } } }, interpolation: { escapeValue: false, // not needed for svelte as it escapes by default }});export const i18n = createI18nStore(i18next);
App.svelte
:
<script> import i18n from './i18n.js';</script><div> {$i18n.t('key')}}</div>
See full example project: Svelte example
The implementation looks like this:
The package creates a Svelte writable of i18next and listens to the events triggered by any updates on the i18next instance.
For example, if an application loads a new namespace for their translations, the svelte_i18next package will trigger thei18next.on(loaded, function(loaded) {})
event.
Check the i18next events here.
Usage:
i18n.js
import i18next from "i18next";import { createI18nStore } from "svelte-i18next";i18next.init({ lng: 'en', resources: { en: { translation: { "key": "hello world" } } }});export const i18n = createI18nStore(i18next);
App.svelte
<script> import i18n from './i18n.js';</script><div> {$i18n.t('key')}}</div>
See a example usage here: Svelte example
You could also use namespaces as you would using i18next and the svelte wrapper will re-render the translations based on the namespace provided.
import { createI18nStore } from 'svelte-i18next'const i18n = createI18nStore(i18n_instance) i18n.loadNamespaces(['example']) // this triggers the re-render and loads translations from the provided namespace.<div> {$i18n.t(key)}</div>
Into svelte? Dealing with localisation?
Original Link: https://dev.to/nishugoel/svelte-i18next-1108
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To