Skip to main content

Language Management

info

No configuration file is needed to work with languages.
Crono provides the i18n file for every user in CronoUser component. So you don't have to install a config file in your project.
Just follow steps below to translate anche change languages.

Folder settings for languages

To be able to use the translations you need to follow a standard structure defined by i18next.
Starting from the App main folder, you've to add locales folder into public folder and then a folder for each language:

root-directory
โ””โ”€โ”€ public
โ””โ”€โ”€ locales
โ”œโ”€โ”€ en
โ”‚ โ””โ”€โ”€ translation.json
โ””โ”€โ”€ it
โ””โ”€โ”€ translation.json

For more information read i18next-react

useTranslation

Is a custom Hook of i18next-react you can use to select the right namespace for your translation, and add it into you component.

import { useTranslation } from "react-i18next";

const Container = () => {
const { t } = useTranslation(["translation"]);

return (
<Typography size="article">{t("translation:sections.title")}</Typography>
);
};

export default Container;

For more information on useTranslation, read i18next-react useTranslation

useCronoUser

This is a custom hook you can use if <CronoUser> is in use in your App.
With this Hook you can manage all the languages in your app with a simple function called setLanguage:

import { useCronoUser } from "@matchplat/crono";

const MyComponent = () => {
const { setLanguage } = useCronoUser();

const changeLang = (data) => {
setLanguage(data).then((data) => console.log("language changed"));
};

return <button onClick={() => changeLang("en-US")}>Change Language</button>;
};

export default MyComponent;

For more information on useCronoUser, read Methods

Language Standard

The standard used to define languages is a four-character standard:

  • "en-US" for English
  • "it-IT" for Italian