{"size": 1240, "ext": "js", "max_stars_repo_path": "client/src/components/HomeComponent.js", "max_stars_repo_name": "lokinder1/Simple_Mern_Short_Demo_Multilingual", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/components/HomeComponent.js", "max_issues_repo_name": "lokinder1/Simple_Mern_Short_Demo_Multilingual", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/components/HomeComponent.js", "max_forks_repo_name": "lokinder1/Simple_Mern_Short_Demo_Multilingual", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 22.5454545455, "max_line_length": 82, "alphanum_fraction": 0.5822580645}
import React, { Suspense } from "react";
import { Trans, useTranslation } from "react-i18next";

// Component using the Trans component
function MyComponent() {
  return (
    <Trans i18nKey="description.part1">
      To get started, edit <code>src/App.js</code> and save to reload.
    </Trans>
  );
}

// loading component for suspense fallback
const Loader = () => (
  <div className="App">
    <div>loading...</div>
  </div>
);

// page uses the hook
function Page() {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div className="App">
      <div className="App-header">
        {/* <Welcome /> */}
        <button type="button" onClick={() => changeLanguage("de")}>
          de
        </button>
        <button type="button" onClick={() => changeLanguage("en")}>
          en
        </button>
      </div>
      <div className="App-intro">
        <MyComponent />
      </div>
      <div>{t("description.part2")}</div>
    </div>
  );
}

// here app catches the suspense from page in case translations are not yet loaded
export default function HomeComponent() {
  return (
    <Suspense fallback={<Loader />}>
      <Page />
    </Suspense>
  );
}
