A localization utility for JavaScript that comes with support for React and React Native.

Table of Contents

• Table of Contents
• Installation/Setup
• Basic Usage
  • Initialization
  • Set language
  • Get language
  • Get Localized Content
    • Basic
    • With Dynamic Values
    • Alternative Syntax
• Further Reading
• Support Me

Installation/Setup

With Yarn (Recommended)

yarn add langutil

With NPM

npm i langutil

With UNPKG:

<script src="https://unpkg.com/langutil@<VERSION>/lib/umd/index.js" crossorigin></script>

Note: Replace index.js with index.min.js when deploying.

Basic Usage

Initialization

import { LangutilCore } from 'langutil'

const dictionary = {
  en: {
    GOOD_MORNING: 'Good morning',
    GOOD_MORNING_NAME: 'Good morning, {:name}.',
    GOOD_MORNING_PNAME: 'Good morning, %p.',
    GOOD_MORNING_NAME_AND_NAME: 'Good morning, {:name1} and {:name2}.',
  },
  id: {
    GOOD_MORNING: 'Selamat pagi.',
    GOOD_MORNING_NAME: 'Selamat pagi, {:name}.',
    GOOD_MORNING_PNAME: 'Selamat pagi, %p.',
    GOOD_MORNING_NAME_AND_NAME: 'Selamat pagi, {:name1} dan {:name2}.',
  },
}

const core = new LangutilCore(dictionary, 'en', { auto: true })

Set language

// With auto-detect
core.setLanguage('en', { auto: true })

// Without auto-detect
core.setLanguage('en')

Get language

core.getLanguage()
// en

Get Localized Content

Basic

core.localize('GOOD_MORNING')
// Good morning.

With Dynamic Values

// By object (Recommended for strings with multiple placeholders)
core.localize('GOOD_MORNING_NAME_AND_NAME', {
  name1: 'John',
  name2: 'Jane',
})
//  Original: Good morning, {:name1} and {:name1}.
// Localized: Good morning, John and Jane.

// By array (Recommended for strings with only one placeholder)
core.localize('GOOD_MORNING_PNAME', ['John'])
//  Original: Good morning, %p.
// Localized: Good morning, John.

Alternative Syntax

Instead of spreading the parameters, you can pass an object like this:

const localizedValue = core.localize({
  keyword: 'GOOD_MORNING_NAME_AND_NAME',
  param: {
    name1: 'John',
    name2: 'Jane',
  }
})
// Good morning, John and Jane.

Further Reading

• Documentations
• Migrating from v3 and below
• Miscellaneous: Looking for a general-purpose state manager for React? Then you might be interested in React Relink.

Support Me

• Ko-fi: ko-fi.com/glyphcat
• BTC: bc1q5qp6a972l8m0k26ln9deuhup0nmldf86ndu5we