https://github.com/nishugoel/svelte-i18next

Internationalization for svelte framework. Based on i18next ecosystem
https://github.com/nishugoel/svelte-i18next

i18next svelte sveltejs web

Last synced: 3 months ago
JSON representation

Internationalization for svelte framework. Based on i18next ecosystem

• Host: GitHub
• URL: https://github.com/nishugoel/svelte-i18next
• Owner: NishuGoel
• License: mit
• Created: 2022-03-28T18:49:25.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-06-05T04:25:21.000Z (7 months ago)
• Last Synced: 2024-10-10T12:43:28.231Z (3 months ago)
• Topics: i18next, svelte, sveltejs, web
• Language: TypeScript
• Homepage: https://npmjs.com/package/svelte-i18next
• Size: 272 KB
• Stars: 51
• Watchers: 4
• Forks: 11
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-i18next [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=%40sveltejs%20wrapper%20for%20i18next%20%0Ahttps%3A%2F%2Fgithub.com%2FNishuGoel%2Fsvelte-i18next%0Avia%20%40TheNishuGoel%20%20&hashtags=i18next,sveltejs,svelte,javascript,webdev)

[![CI](https://github.com/NishuGoel/svelte-i18next/workflows/CI/badge.svg)](https://github.com/NishuGoel/svelte-i18next/actions?query=workflow%3ACI)

[![npm version](https://img.shields.io/npm/v/svelte-i18next.svg)](https://www.npmjs.com/package/svelte-i18next)

[![bundle size](https://img.shields.io/bundlephobia/minzip/svelte-i18next?label=gzip%20bundle)](https://bundlephobia.com/package/svelte-i18next)

[![License](http://img.shields.io/:license-mit-blue.svg)](https://github.com/NishuGoel/svelte-i18next/blob/master/LICENSE)

Svelte wrapper for [i18next](https://i18next.com/)

```

npm i svelte-i18next i18next

```

## Implementation

This library wraps an i18next instance in a Svelte Store to observe [i18next events](https://github.com/NishuGoel/svelte-i18next/blob/main/src/translation-store.ts#L23)

so your Svelte components re-render e.g. when language is changed or a new resource is loaded by i18next.

## Quick Start

`i18n.js`:

```ts

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

  }

});

const i18n = createI18nStore(i18next);

export default i18n;

```

`App.svelte`:

```svelte

  import i18n from './i18n.js';



    {$i18n.t('key')}



```


## Usage with Sveltekit

Sveltekit shares stores across requests on server-side. This means that one users request could change the language setting of another users rendering if that is still ongoing. To avoid this issue, use `setContext` to create request-scoped store instances:

`i18n.js`:

```ts

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 default () => createI18nStore(i18next);

```

`routes/+layout.svelte`:

```sveltehtml

  import getI18nStore from "i18n.js";

  import { setContext } from "svelte";

  

  setContext('i18n', getI18nStore());

```

`routes/+page.svelte`:

```sveltehtml

  import { getContext } from "svelte";

  

  const i18n = getContext("i18n");



  
{ $i18n.t("key") }



```


See full example project: [Svelte example](https://github.com/NishuGoel/svelte-i18next/blob/main/example)