Welcome to the InterLang SDK. You can start by creating 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)
{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 Keytest-...
or a Main Keylanguage-...
. -
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)
{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
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