Have opinions about JavaScript? We want to hear them. Take the 2018 JavaScript Ecosystem Survey »

i18next-tui

1.1.1 • Public • Published

i18next-tui

pipeline status coverage report npm version

i18next Translation User Interface - is a tool to manage translation right from your web application. It is React based component.

Checkout DEMO.

Inspired by POEditor design.

Note: Soon I will provide docker container for those who do not like or do not use react. ;)

Why?

  1. Standart Translation User Interface for i18next is deprecated and too old.
  2. http://locize.com is a cool tool, but it is too complex for small teams and indie projects.
  3. I did not find any FOSS stuff to manage translations from i18next.
  4. That tool is not a competitor for http://locize.com.
  5. It is developed just to cover basic needs in translation management.

TOC

Getting Started

These instructions will help you with the integration or contribution of that library.

Prerequisites

Tested on React v16+ with Node v9.3.0

  • react
  • react-dom

Usage

npm install -d i18next-tui
// or
yarn add i18next-tui

It is recommended to create protected(for dev only) route inside your app and insert component there.

import * as I18NextTUI from "i18next-tui";
 
class Translations extends React.Component {
  render() {
    return <I18NextTUI.I18NextTUI
      namespaceList={namespaceList as I18NextTUI.INamespace[]}
      defaultEmptyPlaceholder="__STRING_NOT_TRANSLATED__"
    />
  }
}

You have 2 options to generate namespaceList:

  • Import JSON directly. Not recommended, because it will increase the size of your bundle. But it is a fast and easy way to test.
  • Use i18next.

Insert JSON

Use that approach if you have not integrated i18next or you just want to test the app. Or you have some custom dynamic wrapper on top of i18next and some dynamic translations.

import de from "/src/locale/de/translation.json";
import en from "/src/locale/en/translation.json";
 
const namespaceList = [
  {
    locales: [
      {
        lang: "en",
        translations: en,
      },
      {
        lang: "de",
        translations: de,
      },
    ],
    name: "Translation",
  },
];

Use i18next

Dynamically grabs content based on translations you have loaded.

import i18n from "i18next";
 
if (!i18n.isInitialized) {
  return;
}
 
const namespaceList = i18n.options.ns.map(namespace => {
  return {
    name: namespace,
    locales: i18n.languages.map(lng => {
      i18n.getResourceBundle(lng, namespace);
    })
  }
});

How to generate JSON translations?

If you do not know how to generate JSON files with translation from your source code. You can use i18next-scanner.

Development and contribution

Install dependencies npm install.

Note: Do not use yarn for dev env. There is no lock file for yarn.

You can build sources with npm run build.

To analyze dependencies use npm run build -- --analyze;

To serve a demo use npm run serve.

npm run all

To simplify life - before committing you can run all command to build, test, update snapshots, lint.

Running the tests

Jest is used for testing purposes. You can run tests with npm test or use watch mode with npm run test-watch.

Coding style tests

Linters are used to prevent bad code. Use them before creating a commit.

npm run lint

Built With

  • Webpack
  • TypeScript
  • React
  • Sass
  • Jest
  • Enzyme

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Keywords

none

install

npm i i18next-tui

Downloadsweekly downloads

8

version

1.1.1

license

MIT

homepage

gitlab.com

repository

Gitgitlab

last publish

collaborators

  • avatar
Report a vulnerability