@emergy/components-translations
v1.1.0
Published
## Introduction
Downloads
12
Readme
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