Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

This page is meant to gather some tips for the development of the DatafariUI web app based on React.

i18n management

The library i18next is used to manage the translation key, translation file loading and management etc.

Basics

The “t” function is used to signify anything that must be translated and the argument of the function is used as the default display text if the key is not defined in the translation file. If a key is not translated in a language, English should be used as a default fallback.

The code of a simple component loading the t function and using it is displayed below: 

import React from 'react';

import { useTranslation } from 'react-i18next';

const TestComponent = () => {
  const { t } = useTranslation();

  return (
    <div>{t('Hello World')}</div>
  )
};

export default TestComponent;

Localization files

Locales files are located in the files public/locales/{localeid}/translation.json where {localeid} is the name of any locale (it, fr, en, …). Files look like this:

{
  "AND": "",
  "Add a search field": "",
  "Advanced Search": "",
  "All Content": "",
  "All words": "",
  "At least one word": "",
  "Basic Search": "",
  "Clear Filter": "",
  "Click if you need to search in a specific field or want to combine with several fields or with basic search": "",
  "Date": "",
  "Delete Selected": "",
  "Document content not indexed": "",
  "Exact expression": "",
  "Export Current Results": "",
  "Extension": "",
  "FILTERS": "",
  "Favorite Document Path": "",
  "Favorite Document Title": "",
  "Feedbacks": "",
  "Field": "",
  "From": "",
  "Go": "",
  "Help": "",
  "Language": "",
  "Language selection": "",
  "Manage Alerts": "",
  "Manage Favorites": "",
  "Manage Saved Queries": "",
  "More Like This": "",
  "My Favorites": "",
  "Not these words": "",
  "OR": "",
  "Operator": "",
  "Relevance": "",
  "Results {{ start }} - {{ end }} of {{ total }}": "Resultats {{ start }} - {{ end }} de {{ total }}",
  "Save Current Query": "",
  "Save Query As Alert": "",
  "Search Tools": "",
  "Search for": "",
  "Search in a specific field": "",
  "Search tools": "",
  "Select All": "",
  "Show Less": "",
  "Show More": "",
  "Showing results for": "",
  "To": "",
  "Will NOT DISPLAY documents with AT LEAST ONE of these terms": "",
  "Will search for ALL the terms listed": "",
  "Will search for EXACTLY the sentence you entered": "",
  "Will search for documents with AT LEAST ONE of these terms": "",
  "anything": "",
  "less than a month": "",
  "less than a year": "",
  "less than five years": ""
}

On the left are the keys and on the right the translations. If any markup is present simply reproduce it without bothering about it, it represent some dynamic data that will be inserted at runtime.

Automatic extraction of keys from code files

Thanks to the babel-plugin-i18next-extract plugin, it is possible to automatically extract the translation keys from the code. To do so, run the following command from the root folder of the project:

npx babel -f .babelrc.json 'src/**/*.{js,jsx}'

You will need access to the internet, or at least npm needs access to a repository with babel available. Indeed, npx relies on the package taken straight from repo instead of installing it locally. This is to ensure the latest version is used and reduce the clutter of dev dependencies installed locally.

  • No labels