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