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

@gucciogucci/simply-translation

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@gucciogucci/simply-translation

Simply Translation library

1.2.3
latest
Source
npm

Version published: 3 years ago

Weekly downloads: 3; increased by50%

Maintainers: 4

Weekly downloads

Created: 4 years ago

Source

simply-translation

A very simple translation component focused only on translation words divided by JSON files with default language. The component uses browser language as first choice and default in case of the translation file is missed. The system uses Unicode language naming, like en-US or en-GB.

Setup

npm install @gucciogucci/simply-translation

Create a JSON file

Translation file is a JSON format, this is an example:

File en.json

{
  "btnCancel": "cancel",
  "btnClose": "close",
  "welcome": "Hello {0} {1}"
}

Please note the 'welcome' key with the attributes annotations

Folder structure

You need to use a JSON file per language in your project, the structure should be like this:

src
└── asset
  └── i18n
    ├── en.json
    └── it.json

Usage

Load translations

In the main file, usually App.js, import the component and set it up like this:

// import component with set up and translation function
import loadTranslation, { simplyTranslate } from '@gucciogucci/simply-translation';

// import translation lib
import en from './asset/i18n/en.json';
import it from './asset/i18n/it.json';

// set up
loadTranslation({
  default: 'en-US',
  languages: {
    'en-US': en,
    'it-IT': it,
  }
});

Configuration

By default, SimplyTranslation use browser language as language selector, you can change it adding source value to url_pathname_slot2 path or html lang attribute:

attribute name	required	type	value	description
default	yes	{string}	en	set up default JSON file
source	no	{string}	null \| url_pathname_slot2 \| html	- null or blank: use browser language - url_pathname_slot2: use URL second slot (e.g.: https://www.domain.com/uk/it/ lang will be it) - html: use HTML lang attribute `<html lang="en" ... >`
languages	yes	{object}	{'en-US': en, 'it-IT': it, ...}	mapping languages files
storageName	no	{string}		In order to avoid potential conflicts in case you have more than one app with this lib in the same page, you can add an extra name parameter to the storage data

Examples

Basic configuration

It will use the Browser Language as selector, en-US as default language and it-IT as extra language:

loadTranslation({
  default: 'en-US',
  languages: {
    'en-US': en,
    'it-IT': it,
  }
});

With different Language Selector sourse

It will use URL as Language Selector https://www.domain.com/uk/en/, and zh_hk, and zh as extras languages:

loadTranslation({
  default: 'en',
  source: 'url_pathname_slot2',
  languages: {
    'en': en,
    'zh_hk': zh_hk,
    'zh': zh,
  }
});

With different data storage name

The translation will be storage in a different object:

loadTranslation({
  default: 'en',
  languages: {
    'en': en
  },
  storageName: 'newName'
});

How to use it

First import the component and then call it with the corresponding key and add attributes in an array in case.

Please check the translation JSON file as example

import { simplyTranslate } from '@gucciogucci/simply-translation';

simplyTranslate('btnCancel'); //= cancel

simplyTranslate('welcome', ['Laura', 'Brown']); //= Hello Laura Brown

License

Licensed under the GNU Lesser General Public License, Version 3.0

Keywords

FAQs

What is @gucciogucci/simply-translation?

Is @gucciogucci/simply-translation popular?

Is @gucciogucci/simply-translation well maintained?

Package last updated on 31 Mar 2022

Did you know?

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