New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@onirix/i18n-module

Package Overview
Dependencies
Maintainers
3
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@onirix/i18n-module

Onirix helper for internationalization experiences.

  • 1.0.0
  • Source
  • npm
  • Socket score

Version published
Maintainers
3
Created
Source

Onirix I18n

Version Twitter: onirix

Onirix I18n allows you to internationalize your experiences modifying labels text based on a language and a set of texts.

Simply add data sheets to Studio elements or provided an object with language information and Onirix I18n Module will take care of modifying the text when the scene is loaded.

Onirix I18n has several modes of operation depending on the data you pass to the constructor.

Using Onirix Studio data structures

If you haven't heard of data sheets and data structures in Onirix Studio, take a look at our documentation about the Datastore module.

In the Onirix Studio scene editor you can add data-sheets to the labels of your scene. These data-sheets must contain the texts that the label can have in the different languages. Each label will have its own data sheet and the Onirix i18n Module will choose the text in the appropriate language and display it on the label.

By default Onirix I18n used a data-structure called ox-i18n but you can pass diferent one indicating its name on the constructor. The structure defines the languages available for the experience.

To use a custom data-structure mode you must define one with a a list of input elements. The name of each input must be the ISO code of the language ('es', 'en', 'de', etc).

Using internationalization inline object.

You can pass a internationalization object with information about the label and the languages and texts that can be aplayed.

This object must be an array with one element for each label to be internationalised. Each element will have the oid of the label in the Onirix Studio scene and an i18n object with the text to display in each language.

[
    {
        "labelOid": "c6c4f5de-84c0-470a-b31e-a64e104afc23"
        "i18n": [
            {
                "es": "Spanish text"
            },
            {
                "en": "English text"
            }
        ]
    }
]

Install

npm install @onirix/i18n-module

Include the dependency within the HTML head tag:

<head>
    <script src="https://unpkg.com/@onirix/i18n-module@1.0.0/dist/ox-i18n-module.umd.js"/>
</head>

As ESM modules:

import OnirixI18nModule from "https://unpkg.com/@onirix/i18n-module@1.0.0/dist/ox-i18n-module.esm.js";

Usage

To use this library, first, the EmbedSDK must be initialize and pass it to the constructor. Next, you must provide the language that the module will use.

import OnirixEmbedSDK from "https://unpkg.com/@onirix/embed-sdk@1.8.0/dist/ox-embed-sdk.esm.js";
import OnirixI18nModule from "https://unpkg.com/@onirix/i18n-module@1.0.0/dist/ox-i18n-module.esm.js";

const embedSDK = new OnirixEmbedSDK();
embedSDK.connect();

const oxI18n = new OnirixI18nModule(embedSDK, "en");

If you want to use the language of the user's browser, you can use this:

import OnirixEmbedSDK from "https://unpkg.com/@onirix/embed-sdk@1.8.0/dist/ox-embed-sdk.esm.js";
import OnirixI18nModule from "https://unpkg.com/@onirix/i18n-module@1.0.0/dist/ox-i18n-module.esm.js";

const embedSDK = new OnirixEmbedSDK();
embedSDK.connect();

const oxI18n = new OnirixI18nModule(embedSDK, navigator.language || navigator.userLanguage);

If the selected language is not among the available languages (specified in the template), the first language defined in the template will be used.

Additionally, a third parameter must be reported that must contain certain information.

import OnirixEmbedSDK from "https://unpkg.com/@onirix/embed-sdk@1.8.0/dist/ox-embed-sdk.esm.js";
import OnirixI18nModule from "https://unpkg.com/@onirix/i18n-module@1.0.0/dist/ox-i18n-module.esm.js";

const embedSDK = new OnirixEmbedSDK();
embedSDK.connect();

const language ="es";

const params = {
    template: "custom-data-structure-name",
    i18nLabelsTexts: null 
};

const oxI18n = new OnirixI18nModule(embedSDK, language, params);

The template parameter allows you to indicate to Onirix I18n the data structure it will find in your experience. By default the value is ox-i18n.

The i18nLabelsTexts is an array that contains information about the labels, the languages ​​that each of them can have and also the text that corresponds to each language.

const i18nLabelsTexts = [
    {
        labelOid: string;
        i18n: [
            {
                es: "Spanish text"
            },
            {
                en: "English text"
            }
        ]
    }
]

OnirixI18nModule Class

Methods

This class includes one listener triggering client action. When the process of set text to labels finish a event is trigger. This event can contain a list of errors f for any label the requested language is not informed.

oxI18n.onFinish = (errors) => {
    /**
     * Your code here
     */
}

The errors array has the following structure:

const errors = [
    {
        labelOid: string;
        language: string;
    }
]
Constructor

The constructor accepts essential data for subscribe to embedsdk events:

constructor(embedSdk, language, params = { template: "ox-i18n", i18nLabelsTexts: null });
  • embedSdk: intance of the sdk used in the experience to listen events and perform action in elements.
  • language: string htat specifies the language the module must use.
  • params: optional object that indicates the mode, with data-structures or with a i18n object.

Author

👤 Onirix

Keywords

FAQs

Package last updated on 13 Jun 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc