epilot
Published in

epilot

svelte-i18next

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:-

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 the
i18next.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?

Show some love @svelte-i18next

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nishu Goel

Nishu Goel

Engineering stuff @epilotGmbH; Web Google Developer Expert; Microsoft MVP;