# interlang_app_sdk

> The official SDK for InterLang, the application internalization platform

Latest version **0.0.5** (published 2024-01-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install interlang_app_sdk
pnpm add interlang_app_sdk
yarn add interlang_app_sdk
bun add interlang_app_sdk
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2024-01-30 |
| First published | 2024-01-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 61 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | InterLang |
| Maintainers | tegaosowa |
| Keywords | translation, language, website, webapp, website translation, internalization, international, sdk, interlang |

## Links

- npm: https://www.npmjs.com/package/interlang_app_sdk
- Homepage: https://interlang.app
- npm.io page: https://npm.io/package/interlang_app_sdk

## Dependencies (3)

- [cors](https://npm.io/package/cors.md) ^2.8.5
- [nodemon](https://npm.io/package/nodemon.md) ^3.0.3
- [body-parser](https://npm.io/package/body-parser.md) ^1.20.2

## Alternatives

- [messageformat](https://npm.io/package/messageformat.md) — 329.7K weekly downloads
- [@mintlify/scraping](https://npm.io/package/@mintlify/scraping.md) — 294.8K weekly downloads
- [@mintlify/previewing](https://npm.io/package/@mintlify/previewing.md) — 209.5K weekly downloads
- [@mintlify/prebuild](https://npm.io/package/@mintlify/prebuild.md) — 209.5K weekly downloads
- [@mintlify/link-rot](https://npm.io/package/@mintlify/link-rot.md) — 206.3K weekly downloads

## Recent versions

- 0.0.5 (latest) — 2024-01-30
- 0.0.4 — 2024-01-30
- 0.0.3 — 2024-01-28
- 0.0.2 — 2024-01-28
- 0.0.1 — 2024-01-28

## README

# InterLang SDK

Welcome to the InterLang SDK.
You can start by creating your InterLang account:

[Create Your InterLang Account](https://interlang.app)


This is the official SDK for InterLang. using this SDK, you can create applications in one national language, and other users with a different national language would easily be able to use your application, just by translating the application to their national language. InterLang helps you build international applications.

Get started by installing the dependencies into your project `docs` folder:

  ```bash [npm]
  npm install interlang_app_sdk
  ```

  ```bash [yarn]
  yarn add interlang_app_sdk
  ```

  ```bash [pnpm]
  pnpm install interlang_app_sdk
  ```

Using the InterLang SDK on the client-side

## `createDocumentTranslate(args)`

`createDocumentTranslate(args)`{lang=ts} is responsible for translating the entire web-page to the specified language in the args props. The request is sent directly to InterLang

- `args` refers to the argument expected by the function

`apiKey`, `languageFrom`, `applicationId`, `targetLanguage`, `onProcessing` and `onTranslated` are the arguments expected to be passed as an object.

This is the Typescript type specific example

```ts
createDocumentTranslate({
      apiKey: string,
      languageFrom: string | 'auto',
      applicationId?: string | null,
      targetLanguage: string,
      onProcessing: () => void
      onTranslated: () => void
})
```

This is how it would be used in code, with a react and browser example

```ts [react]
import language from 'interlang_app_sdk/dist/supported_languages'
import { createDocumentTranslate } from 'interlang_app_sdk/dist/client'

...

const [selectedLanguage, setSelectedLanguage] = useState('default')
  const handleLanguageTranslate = () => {
    createDocumentTranslate({
      apiKey: /* API Key*/,
      languageFrom: 'auto',
      applicationId: /* Application ID (Optional if using a test API Key) */,
      targetLanguage: selectedLanguage,
      onProcessing: function (): void {
        //what should happen when language has started
      },
      onTranslated: function (): void {
        //what should happen when language is completed
      },
    })
  }
```

```jsx [browser]

<script src="https://interlang.app/sdk/dist/browser_sdk.min.js"> </script>

...
  const handleLanguageTranslate = () => {
    const language = document.getElementById('language').value;
    createDocumentTranslate({
      apiKey: /* API Key*/,
      languageFrom: 'auto',
      applicationId: /* Application ID (Optional if using a test API Key) */,
      targetLanguage: language,
      onProcessing: function (): void {
        //what should happen when language has started
      },
      onTranslated: function (): void {
        //what should happen when language is completed
      },
    })
  }
```


- `apiKey` This is your InterLang API Key. It is either a Test Key `test-...` or a Main Key `language-...`.
- `languageFrom` The language your are currently translating the page from. **Recommended** `'auto'`
- `applicationId` An optional field if you are using a Test API Key, and compulsory if using a Main API Key. This is the id of the current Project you've created in your InterLang account.
- `targetLanguage` The language to be translated to.
- `onProcessing` Code to run when language translation has started.
- `onTranslated` Code to run when translation is completed

## `setDynamicData(arg1, arg2)`

`setDynamicData(arg1, arg2)`{lang=ts} is used to create dynamic data. This function should be the first javascript that runs in the page. if you're using react, it should be in the `useEffect` hook.

```ts [browser]
setDynamicData('["Good Morning", "Good Afternoon", "Good Evening"]', { active: 2 });
```

```ts [react]
useEffect(()=>{
    setDynamicData('["Good Morning", "Good Afternoon", "Good Evening"]', { active: 2 });
}, [])
```

In the **HTML** or **JSX** code, the element with the dynamic data should look like this

```html
<div data-key='["Good Morning", "Good Afternoon", "Good Evening"]' id="ab">Good Morning</div>
```


Then a function that changes the dynamic value would be something like this

```ts
const changeText = (update: number) => {
    updateDynamicData('["Good Morning", "Good Afternoon", "Good Evening"]', { active: update });
    var textElement = document.getElementById('ab');
    textElement.innerText = getDynamicTranslationData('["Good Morning", "Good Afternoon", "Good Evening"]', getDynamicData('["Good Morning", "Good Afternoon", "Good Evening"]'));
}
```

- `updateDynamicData` The function takes in two arguments, the dynamic data, and an object of the currently selected index

- `getDynamicTranslationData` The function gets the translated text when the page has been translated

- `getDynamicData` The function gets the currently active index from the translated result

- `active` This field points to the item that is currently visible or in view from the dynamic data



## `Supported Languages`

```ts [react]
import language from 'interlang_app_sdk/dist/supported_languages'

```

You can find the supported languages by using this package. It exports the language object as an array of all the languages that InterLang supports

---
_Source: https://npm.io/package/interlang_app_sdk · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._