open-index/open-npm huggingface dataset:
npm package: @lokale/react
Description: React implementation for Lokale localization framework
Author: Lokale
Latest version: 6.2.7

{% import "../../readmeMacros/macros.njk.md" as macros %}
{{ macros.header('Lokale for React', 'The Lokale i18n SDK for React', packageName) }}

# What is Lokale for React?
React integration library of Lokale. This package makes it super simple to add i18n to your React app!
For more information about using Lokale with React, visit the [docs 📖](https://lokale.fallback.in/integrations/react).

Localize (translate) your CRA, Next.js, or other React projects to multiple languages with Lokale. Integration of Lokale is extremely simple! 🇯🇵 🇰🇷 🇩🇪 🇨🇳 🇺🇸 🇫🇷 🇪🇸 🇮🇹 🇷🇺 🇬🇧

![Lokale Demo Example](https://github.com/user-attachments/assets/ca0d0ea0-a440-409f-a3cd-f93ef01dc197)

{{ macros.integrationLinks('Lokale for React docs', macros.v5link('integrations/react/installation')) }}

{{ macros.installation('react') }}

Then use the library in your app:

```typescript jsx
import { LokaleProvider, ReactPlugin, FormatSimple } from "@lokale/react";

const lokale = Lokale()
  .use(ReactPlugin())
  .use(FormatSimple())
  .init({
    language: 'en',
    apiUrl: process.env.REACT_APP_LOKALE_API_URL,
    apiKey: process.env.REACT_APP_LOKALE_API_KEY
  });


<LokaleProvider
  lokale={lokale}
>
  <Your app components>
</LokaleProvider>
```

## Usage

To translate texts using Lokale React integration, you can use `T` component or `useTranslate` hook.

### T component

```typescript jsx
import { T } from "@lokale/react";

...

<T>translation_key</T>
```

or

```typescript jsx
<T keyName="translation_key">Default value</T>
```

### useTranslate hook

```javascript
import { useTranslate } from "@lokale/react";

...

const { t } = useTranslate();

...

t("key_to_translate")
```

{{ macros.prereq('React') }}

{{ macros.why() }}

## Development
{{ macros.developmentInstallation() }}
{{ macros.development('react') }}

{{ macros.developmentTesting('/packages/react') }}

{{ macros.e2eTesting('react') }}

{{ macros.contributors() }}
npm package: @lokale/svelte
Description: Svelte implementation for Lokale localization framework
Author: Lokale
Latest version: 6.2.7

{% import "../../readmeMacros/macros.njk.md" as macros %}
{{ macros.header('Lokale for Svelte', 'The Lokale i18n SDK for Svelte', packageName) }}

# What is Lokale for Svelte?
Svelte integration library of Lokale. With this package, it's super simple to add i18n to your Svelte app!
For more information about using Lokale with Svelte, visit the [docs 📖](https://lokale.fallback.in/integrations/svelte).

Localize (translate) your Svelte or SvelteKit projects to multiple languages with Lokale.
Integration of Lokale is extremely simple! 🇯🇵 🇰🇷 🇩🇪 🇨🇳 🇺🇸 🇫🇷 🇪🇸 🇮🇹 🇷🇺 🇬🇧

{{ macros.integrationLinks('Lokale for Angular docs', macros.v5link('integrations/svelte/installation')) }}

{{ macros.installation('svelte') }}

Then use the library in your app:

```svelte
<script lang="ts">
  import { LokaleProvider, Lokale, SveltePlugin, FormatSimple } from '@lokale/svelte';

  const lokale = Lokale()
    .use(SveltePlugin())
    .use(FormatSimple())
    .init({
      apiUrl: import.meta.env.VITE_LOKALE_API_URL,
      apiKey: import.meta.env.VITE_LOKALE_API_KEY,
      language: 'en'
    });
</script>

<LokaleProvider {lokale}>
  <div slot="fallback">Loading...</div>
  <slot />
</LokaleProvider>
```

## Usage

To translate texts using Lokale Svelte integration, you can use `T` component or `getTranslate` function.

### T component

```svelte
<script>
  import { T } from '@lokale/svelte';
</script>

<T keyName="key" defaultValue="This is default" />
```

### getTranslate function

The `getTranslate` function returns a store containing the function, which translates your key.

```svelte
<script>
  import { getTranslate } from '@lokale/svelte';

  const { t } = getTranslate();
</script>

{$t('this_is_a_key', { key: 'value', key2: 'value2' })}
```

### Changing the language

To change the current language, use `getLokale` method. For example, you can bind it to a select value.

```svelte
<script lang="ts">
  import { getLokale } from '@lokale/svelte';

  const lokale = getLokale(['language']);

  function handleLanguageChange(e) {
    $lokale.changeLanguage(e.currentTarget.value);
  }
</script>

<select value={$lokale.getLanguage()} on:change={handleLanguageChange}> ... </select>
```

{{ macros.prereq('Svelte') }}

{{ macros.why() }}

## Development
{{ macros.developmentInstallation() }}
{{ macros.development('svelte') }}

{{ macros.developmentTesting('/packages/svelte') }}

{{ macros.e2eTesting('svelte') }}

{{ macros.contributors() }}
npm package: @lokale/vue
Description: Vue implementation for Lokale localization framework
Author: Lokale
Latest version: 6.2.7

{% import "../../readmeMacros/macros.njk.md" as macros %}
{{ macros.header('Lokale for Vue', 'The Lokale i18n SDK for Vue', packageName) }}


# What is Lokale for Vue?
Vue integration library of Lokale. With this package, it's super simple to add i18n to your Vue app!
For more information about using Lokale with Vue, visit the [docs 📖](https://lokale.fallback.in/integrations/svelte).

Localize (translate) your Vue projects to multiple languages with Lokale.
Integration of Lokale is extremely simple! 🇯🇵 🇰🇷 🇩🇪 🇨🇳 🇺🇸 🇫🇷 🇪🇸 🇮🇹 🇷🇺 🇬🇧

> Currently we support vue v3 only

{{ macros.integrationLinks('Lokale for Vue docs', macros.v5link('integrations/vue/installation')) }}

{{ macros.installation('vue') }}

Initialize lokale

```ts
import { Lokale, VuePlugin, VueLokale, FormatSimple } from '@lokale/vue';

const lokale = Lokale()
  .use(VuePlugin())
  .use(FormatSimple())
  .init({
    language: 'en',
    apiUrl: process.env.VUE_APP_LOKALE_API_URL,
    apiKey: process.env.VUE_APP_LOKALE_API_KEY,
  });

...

app.use(VueLokale, { lokale });
```

Then use the library in your app:

```html
<template>
  <LokaleProvider>
    <template v-slot:fallback>
      <div>Loading...</div>
    </template>
    <App />
  </LokaleProvider>
</template>
```



### T component

```html
<template>
  <T keyName="translation_key" />
</template>

<script setup>
  import { T } from '@lokale/vue';
</script>
```

or with the default value

```html
<T keyName="translation_key" defaultValue="Default value" />
```

## Composition API for imperative translations

```html
<template>
  <div title="t('translation_key')">Hello</div>
</template>

<script setup>
  import { useTranslate } from '@lokale/vue';

  const { t } = useTranslate();
</script>
```

or for language switching

```html
<template>
  <select
    :value="lokale.getLanguage()"
    v-on:change="changeLanguage"
  >
    <option value="en">en</option>
    <option value="de">de</option>
  </select>
</template>

<script setup>
  import { useLokale } from '@lokale/vue';

  const lokale = useLokale(['language']);

  const changeLanguage = (e) => {
    lokale.value.changeLanguage(e.target.value);
  };
</script>
```

{{ macros.prereq('Vue') }}

{{ macros.why() }}

## Development
{{ macros.developmentInstallation() }}
{{ macros.development('vue') }}

{{ macros.developmentTesting('/packages/vue') }}

{{ macros.e2eTesting('vue') }}

{{ macros.contributors() }}