Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

app-translator

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

app-translator

Define multiple dictionaries for your app and translate strings instantly

  • 2.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

App Translator

version size download

Define multiple dictionaries for your app and translate strings instantly at runtime.
This tool does not call external APIs to translate your strings, you must first define yours dictionaries.

Installation

npm install app-translator

Compatibility

Compatible with Node >=8.0.0

Features

  • Easy to use
  • You can add languages with just putting the dictionary in your lang folder
  • Can infer the browser language and search if a related dictionary is defined
  • Do not need to reload the app to switch the language
  • Extremely small

Other features

  • Static type checking with typescript declaration files
  • Exhaustive doc comments
  • Tree shakable: exported with ESM modules
  • Tested with available coverage report

API

Index

Dictionary
Collection
AppTranslatorOptions
initTranslator
translate (alias t)
tryUseBrowserLanguage
getAvailableLanguages
setLanguage
setOptions


Dictionary
  • Interface

Define a single dictionary.

PropertyTypeDescription
namestringThe language name
bcp47stringA valid BCP47 tag
pairs{ [ original: string ]: string }Pairs of original-translated strings

Collection
  • interface

Define the dictionaries collection in an array of dictionaries.

Array <Dictionary>


AppTranslatorOptions
  • Interface

Define options for AppTranslator.

PropertyTypeDescription
caseSensitive?booleanLook for the string in dictionary without consider the letters case
autoCapitalize?booleanCapitalize automatically the first letter
logs?booleanEmit warns and non-blocking errors to the console

initTranslator

Initialize App Translator with a target language, a collection and custom options. If a collection is not provided, translate() method will bypass your strings.
⚠ It throws an error if you try to initialize App Translator multiple times.

ParameterTypeDescription
languagestringThe primary dictionary to use for translations
collection?CollectionThe collection of dictionaries
options?AppTranslatorOptionsDefine the behavior of AppTranslator

translate (alias t)
  • Function ( originalStr: string | number, capitalize?: boolean ): string

Return the translated string in the chosen language or the original string if no translation was found

ParameterTypeDescription
originalStrstring or numberThe original string in the code
capitalizebooleanCapitalize the first letter of the output

tryUseBrowserLanguage
  • Function(): string | null

Try to infer the dictionary from the browser. It compares the bcp47 tag in the dictionaries with navigator.language. If a dictionary was found, it returns the found language name and sets it as primary language. Otherwise returns null and does not change the language.


getAvailableLanguages
  • Function(): Array<string>

Return an array of the names of the currently loaded dictionaries.


setLanguage
  • Function(language: string): void

Set a new primary language. If not present in the collection will generate a console error but will not change the language.


setOptions

Override the provided new options with the old one.
⚠ It throws an error if you pass invalid options


Examples

You can import dictionaries as json or js modules. In this example I'll use the ES js modules.

  1. Put your dictionaries in src/languages/
export const italian = {
    name: 'italian',
    bcp47: 'it-IT',
    pairs: {
        'leave a comment': 'lascia un commento',
    },
}
  1. Define an index in src/languages/ with all your exported languages (you can skip this step and import directly in your entry point, but this is more pratical for many dictionaries)
export * from './russian'
export * from './german'
export * from './italian'
export * from './spanish'
  1. Import them grupped and create your collection
import * as languages from './languages'
const collection = Object.values(languages)
  1. Initialize App Translator
import { initTranslator } from "app-translator";
initTranslator("italian", collection, { caseSensitive: false, autoCapitalize: true });

Now the dictionaries and options are available in window.appTranslator.

  1. Translate everywhere! (Example in React)
import { t } from "app-translator";

const App = () => {
  return <h1>{ t("leave a Comment") }</h1>;
};

Folder structure:
src/
--main.js
--languages/
----russian.js
----german.js
----italian.js
----spanish.js
----index.js

You can use App Translator even without a module system or organize your exports as you think is best, there are no specific rules about it.

Dependencies

No dependencies

License

MIT

Keywords

FAQs

Package last updated on 17 Aug 2020

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