https://github.com/glyph-cat/langutil

Localization for JavaScript made simple.
https://github.com/glyph-cat/langutil

accessibility auto-language-detection javascript language localization translation

Last synced: about 1 month ago
JSON representation

Localization for JavaScript made simple.

• Host: GitHub
• URL: https://github.com/glyph-cat/langutil
• Owner: glyph-cat
• License: mit
• Created: 2018-11-05T10:41:17.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2023-01-09T15:22:01.000Z (over 3 years ago)
• Last Synced: 2025-06-19T05:15:49.596Z (about 1 year ago)
• Topics: accessibility, auto-language-detection, javascript, language, localization, translation
• Language: TypeScript
• Homepage:
• Size: 12.4 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/funding.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          


[![Langutil](https://raw.githubusercontent.com/glyph-cat/langutil/main/assets/langutil-wording.svg)](https://github.com/glyph-cat/langutil)

[![Version](https://img.shields.io/npm/v/langutil.svg)](https://github.com/glyph-cat/langutil/releases)

![Build Status](https://img.shields.io/github/workflow/status/glyph-cat/langutil/Test/main)

![Bundle size](https://img.shields.io/bundlephobia/min/langutil)

![Downloads](https://img.shields.io/npm/dt/langutil)

[![License](https://img.shields.io/github/license/glyph-cat/langutil)](https://github.com/glyph-cat/langutil/blob/main/LICENSE)

[![Works with React](https://img.shields.io/static/v1?label&logo=react&logoColor=61DBFB&message=Works%20with%20React&color=4a4a4a)](#using-with-react)

[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/glyph-cat/langutil)

[![Support me on Ko-fi](https://img.shields.io/static/v1?label&logo=kofi&logoColor=ffffff&message=Support%20me%20on%20Ko-fi&color=FF5E5B)](https://ko-fi.com/glyphcat)






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




![Langutil Demo](https://raw.githubusercontent.com/glyph-cat/langutil/main/assets/langutil-demo.gif)




# Table of Contents

- [Table of Contents](#table-of-contents)

- [Installation/Setup](#installationsetup)

- [Basic Usage](#basic-usage)

  - [Initialization](#initialization)

  - [Set language](#set-language)

  - [Get language](#get-language)

  - [Get Localized Content](#get-localized-content)

    - [Basic](#basic)

    - [With Dynamic Values](#with-dynamic-values)

    - [Alternative Syntax](#alternative-syntax)

- [Further Reading](#further-reading)

- [Support Me](#support-me)




# Installation/Setup

With [Yarn](https://yarnpkg.com/package/langutil) (Recommended)

```sh

yarn add langutil

```




With [NPM](https://www.npmjs.com/package/langutil)

```sh

npm i langutil

```




With UNPKG:

```html

```

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




# Basic Usage

## Initialization

```js

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

```js

// With auto-detect

core.setLanguage('en', { auto: true })

// Without auto-detect

core.setLanguage('en')

```

## Get language

```js

core.getLanguage()

// en

```

## Get Localized Content

### Basic

```js

core.localize('GOOD_MORNING')

// Good morning.

```

### With Dynamic Values

```js

// 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:

```js

const localizedValue = core.localize({

  keyword: 'GOOD_MORNING_NAME_AND_NAME',

  param: {

    name1: 'John',

    name2: 'Jane',

  }

})

// Good morning, John and Jane.

```




# Further Reading

* [Documentations](https://github.com/glyph-cat/langutil/tree/main/docs)

* [Migrating from v3 and below](https://github.com/glyph-cat/langutil/tree/main/docs/v3-migration.md)

* Miscellaneous: Looking for a general-purpose state manager for React? Then you might be interested in [React Relink](https://github.com/glyph-cat/react-relink).




# Support Me

* Ko-fi: [`ko-fi.com/glyphcat`](https://ko-fi.com/glyphcat)

* BTC: [`bc1q5qp6a972l8m0k26ln9deuhup0nmldf86ndu5we`](bitcoin:bc1q5qp6a972l8m0k26ln9deuhup0nmldf86ndu5we)