components-translations

Introduction

Translation module helps you to :

• create dynamic routes (/, /fr, /de) depending of the language you want
• translate your content client and server side

Install

yarn add components-translations

Usage

In the root folder of your project, create :

• a file called modules.config.js It contains all the configuration of the module,
• a folder called : locales Every lang need a <lng>.json file (ex: locales/fr.json).

module.exports = {
  translations: {
    langs: {
      en: "English",
      fr: "Français",
      pl: "Polskie",
      ru: "Russian",
      zh: "Chinese",
      ja: "Japanese",
      it: "Italiano",
      es: "Español",
      pt: "Portuguese",
      tr: "Türkçe",
      de: "Deutschh"
    },
    defaultLocal: "en"
  }
};

Example of a lang file:

{
  "hello": "Hello"
}

Translate a text

import * as React from "react";
import { useTranslation } from "@emergy/components-translations";

const Layout: React.FC = () => {
  const { t } = useTranslation();
  return <div>{t("hello")}</div>;
};

export default Layout;

Using /[lang]

Make sure to create a [/lang] directory to enable dynamic routing. If you want your users to use / instead of /en as a default language, you need to use the following configuration:

// /pages/index.tsx
import { withLocale } from "@emergy/components-translations";
import { useRouter } from "next/router";
import IndexPage from "./[lang]/index";
export default withLocale(IndexPage, useRouter);

// /pages/[/lang]/index.tsx
import React from "react";

import { withLocale, useTranslation } from "@emergy/components-translations";
import { useRouter } from "next/router";

const HomePage = () => {
  const { t } = useTranslation();
  return (
    <div>
      <h1>{t("home")}</h1>
    </div>
  );
};

export default withLocale(HomePage, useRouter);

Using module CSS

Scss:

// styles.scss
@import "../node_modules/@emergy/components-translationsgs/dist/index.es.css";

Using PurgeCSS

// next.config.js
const purgeCssPaths = [
  "pages/**/*",
  "components/**/*",
  "node_modules/@emergy/components-translations/dist/**/*",
];

withPurgeCss({
  purgeCssPaths,
  ...
});

Test

Basic test are created and executed for each build.
The test with enzyme doesn't work properly yet.

License

MIT © mlescaudron