Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 8, 2022 01:32 pm GMT

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:

svelte-i18next - npm

Svelte wrapper for i18next. Latest version: 1.2.0, last published: a day ago. Start using svelte-i18next in your project by running `npm i svelte-i18next`. There are no other projects in the npm registry using svelte-i18next.

favicon npmjs.com

GitHub:

GitHub logo NishuGoel / svelte-i18next

Internationalization for svelte framework. Based on i18next ecosystem

svelte-i18next

CInpm versionbundle sizeLicense

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


Original Link: https://dev.to/nishugoel/svelte-i18next-1108

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To