open-index/open-npm huggingface dataset:
npm package: @loqly/react
Description: The loqly React package helps you use the loqly platform for internationalization and copy management in React projects.
Author: https://github.com/loqly
Latest version: 0.1.3

# loqly-react

**loqly-react** is a JavaScript package that makes it easy to integrate [loqly](https://loqly.dev) for internationalization and copy management in your React projects.

For detailed documentation and guides, visit the [loqly documentation](https://loqly.dev/documentation).

## Table of Contents

- [Installation](#installation)
- [Setup](#setup)
- [Translating in Components](#translating-in-components)
- [Interpolation](#interpolation)
- [Updating the Langugae](#updating-the-language)

## Installation

Install via npm

```bash
npm install @loqly/react
```

Include via script tag

```html
<script src="https://unpkg.com/@loqly/react/dist/index.umd.js"></script>
```

## Setup

In your main.jsx, import **LoqlyReact** and wrap your App:

```js
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import LoqlyReact, { getTranslations } from '@loqly/react'
import fallback from './translations.json'

const translations = await getTranslation(
  'your-loqly-api-key',

  // Optional configuration
  {
    projectIds: ['website'],
    namespaces: ['auth', 'error'],
    languages: ['en', 'de'],
  },
  fallback
)

createRoot(document.getElementById('root')).render(
  <LoqlyReact translations={translations} defaultLocale='en'>
    <App />
  </LoqlyReact>
)
```

If you pass a fallback object to the plugin, your translations should be structured like this:

```json
{
  "auth.btn.login": {
    "en": "Login",
    "de": "Anmelden"
  },
  "error_404": {
    "en": "Page not found.",
    "de": "Seite konnte nicht gefunden werden."
  }
}
```

## Translating in Components

You can access the translation function t anywhere inside your app using the useLoqly hook:

```js
import { useLoqly } from '@loqly/react'

function MyButton() {
  const { t } = useLoqly()

  return <button>{t('auth.btn.login')}</button>
}
```

## Interpolation

You can easily insert dynamic content into your translations using our string interpolation functionality:

```js
<h2>
  {t('User {user} has {count} new notifications', {
    user: 'Alice',
    count: 3,
  })}
</h2>
```

This will render as:

```html
<h2>User Alice has 3 new notifications</h2>
```

## Updating the language

To change the current language, call updateLanguage from the hook:

```js
import { useLoqly } from '@loqly/react'

function LanguageSwitcher() {
  const { updateLanguage } = useLoqly()

  return (
    <>
      <button onClick={() => updateLanguage('en')}>English</button>
      <button onClick={() => updateLanguage('de')}>German</button>
    </>
  )
}
```
npm package: @loqly/vue
Description: The loqly Vue package helps you using the loqly platform for internationalization and copy management.
Author: https://github.com/loqly
Latest version: 0.1.16

# loqly-vue

**loqly-vue** is a JavaScript package that makes it easy to integrate [loqly](https://loqly.dev) for internationalization and copy management in your Vue.js projects.

For detailed documentation and guides, visit the [loqly documentation](https://loqly.dev/documentation).

## Table of Contents

- [Installation](#installation)
- [Setup](#setup)
- [Translating in Components](#translating-in-components)
- [Interpolation](#interpolation)
- [Updating the Langugae](#updating-the-language)

## Installation

Install via npm

```bash
npm install @loqly/vue
```

Include via script tag

```html
<script src="https://unpkg.com/@loqly/vue/dist/index.umd.js"></script>
```

## Setup

In your main.js, import LoqlyVue and register it as a plugin:

```js
import { createApp } from 'vue'
import App from './App.vue'
import LoqlyVue, { getTranslations } from '@loqly/vue'

const app = createApp(App)

const translations = await getTranslations('your-loqly-api-key')
app.use(LoqlyVue, {
  translations: translations,
  defaultLocale: 'en', // Optional, default is 'en'
  func: '$t', // Optional, name of global translate function, default is '$t'
})

app.mount('#app')
```

If you pass a fallback object to the plugin, your translations should be structured like this:

```json
{
  "auth.btn.login": {
    "en": "Login",
    "de": "Anmelden"
  },
  "error_404": {
    "en": "Page not found.",
    "de": "Seite konnte nicht gefunden werden."
  }
}
```

## Translating in Components

After registering the plugin, a global translation function (default: $t) will be available in all templates:

```html
<button>{{ $t('auth.btn.login') }}</button>
```

If you configured for example func: 't', you would instead write:

```html
<button>{{ t('auth.btn.login') }}</button>
```

If you prefer, you can call the translate function directly instead of using the global $t:

```js
import { translate } from '@loqly/vue'

const btnText = translate('auth.btn.login')
```

## Interpolation

You can easily insert dynamic content into your translations using our string interpolation functionality:

```vue
<h2>
  {{
    t(
      'User {user} has {count} new notifications',
      { user: 'Alice', count: 3 }
    )
  }}
</h2>
```

This will render as:

```html
<h2>User Alice has 3 new notifications</h2>
```

## Updating the language

To change the current language dynamically, use the useLoqly composable inside your components:

```vue
<script setup>
import { useLoqly } from '@loqly/vue'

const { updateLanguage } = useLoqly()
</script>

<template>
  <button @click="updateLanguage('de')">Switch to German</button>
  <button @click="updateLanguage('en')">Switch to English</button>
</template>
```
npm package: @loqly/web
Description: The loqly web package helps you using the loqly platform for internationalization and copy management.
Author: https://github.com/loqly
Latest version: 0.1.16

# loqly-web

**loqly-web** is a JavaScript package that makes it easy to integrate [loqly](https://loqly.dev) for internationalization and copy management in your web projects.

For detailed documentation and guides, visit the [loqly documentation](https://loqly.dev/documentation).

## Table of Contents

- [Installation](#installation)
- [Setup](#setup)
- [Updating the language](#updating-the-language)
- [Custom functionality](#using-loqly-in-custom-functionality)
- [Interpolation](#interpolation)

## Installation

Install via npm

```bash
npm install @loqly/web
```

Include via script tag

```html
<script src="https://unpkg.com/@loqly/web/dist/index.umd.js"></script>
```

## Setup

To auto-select your elements, they should have a data attribute like so:

```html
<button data-t="auth.btn.login"></button>
```

```js
import Loqly from '@loqly/web'

const loqly = new Loqly({
  apiKey: 'your-loqly-api-key',
  defaultLocale: 'en', // Optional, defaults to 'en', used as fallback language
})

// Fetch your translations & translate the current page
await loqly.init()
```

## Updating the language

```js
loqly.updateLanguage('de') // Automatically translates the current page
loqly.locale = 'de' // Updating the language without auto translation
```

## Manually translating elements

```js
// Translate the whole page
loqly.translatePage()

// Translate multiple elements
const paragraphs = document.querySelectorAll('p')
loqly.translateElements(paragraphs)

// Translate a single element
const loginBtn = document.querySelector('button.login')
loginBtn.textContent = loqly.t('auth.btn.login')
```

## Using loqly in custom functionality

You can implement loqly into your existing system and just fetch your translations. No need to init loqly then.

```js
import Loqly from '@loqly/web'

const translations = await Loqly.getTranslations(
  apiKey: 'your-loqly-api-key',

  // Optional configurations
  options: {
    projectIds: ['website'],
    namespaces: ['auth', 'error'],
    languages: ['en', 'de']
  },
  fallback: {
    "auth.btn.login": { en: 'Login', de: 'Anmelden' }
  }
)
```

## Interpolation

You can easily insert dynamic content into your translations using our string interpolation feature.

```js
const count = document.querySelector('.count')
count.textContent = loqly.t('User {user} has {count} new notifications', {
  user: 'Alice',
  count: 3,
})
```

This will render as:

```html
<p class="count">User Alice has 3 new notifications</p>
```