Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add French-English translation #148

Open
tedspare opened this issue Mar 28, 2021 · 0 comments
Open

Add French-English translation #148

tedspare opened this issue Mar 28, 2021 · 0 comments
Assignees
Labels
enhancement A new feature frontend React, Material UI

Comments

@tedspare
Copy link
Member

tedspare commented Mar 28, 2021

  • We'll use the external internationalization ("i18n") library react-i18next
  • To get started, create a file src/i18n/index.js with an object mapping keys to EN and FR phrases like this:
const resources = {
  en: {
    translation: {
      "welcomeDialogTitle": "Welcome to the MU Open-Air Museum"
    }
  },
  fr: {
    translation: {
      "welcomeDialogTitle": "Bienvenue au musée de plein air MU"
    }
  }
};
  • Inside of components with user-readable text, import the i18n hook like this:
import { useTranslation } from 'react-i18next';

function SomeComponent () {
  const { t } = useTranslation();
  return <div>{t("welcomeDialogTitle")}</div>
}
@tedspare tedspare added enhancement A new feature frontend React, Material UI labels Mar 28, 2021
@tedspare tedspare self-assigned this May 5, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement A new feature frontend React, Material UI
Projects
None yet
Development

No branches or pull requests

1 participant