InterLang SDK

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

Create Your InterLang Account

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:

npm install interlang_app_sdk

yarn add interlang_app_sdk

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

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

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
      },
    })
  }

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

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

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

<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

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

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