I18n-table NPM

Installation

npm install i18n-table

Get started

Import TranslationManager and styles

import TranslationManager from "i18n-table";
import "i18n-table/dist/index.css";

Prepare translations

const translations = {
  en: {
    colors: {
      red: "Red",
      blue: "Blue",
      green: "Green",
    },
  },
  es: {
    colors: {
      red: "Rojo",
      green: "Verde",
    },
  },
};

translations object should have locales as keys and objects or nested objects as values.

Prepare locales with full and local names.

!IMPORTANT The locale property have to match with locale used in the first step.

const locales = [
  { locale: "en", fullName: "English", localName: "English" },
  { locale: "es", fullName: "Spanish", localName: "Español" },
];

Render TranslationManager on your page

export const App = () => {
  const onSave = (translation) => {
    /* Handle saving translations - structure is the same as in the step 2. */
  };

  return <TranslationManager translations={translations} locales={locales} onSave={onSave} />;
};

If you want to write your own styles, copy /src/lib/styles.css file to your project, modify it and import it instead of i18n-table/dist/index.css
You can also customize header translations.

const componentTranslations = {
  save: t("save"),
  search: t("search"),
  select: t("select"),
  translationKey: t("translationKey"),
};

export const App = () => {
  const onLocaleChange = (locale) => i18n.setLocale(locale);

  return (
  <TranslationManager
    {/* ... */}
    componentTranslations={componentTranslations}
    onLocaleChange={onLocaleChange}
  />
)
};