...
...
| Info |
|---|
Warning: not valid Valid as of Datafari 5.4 when using DatafariUI |
This page is meant to gather some tips for the development of the DatafariUI web app based on React.
...
| Code Block | ||
|---|---|---|
| ||
import React from 'react'; import { useTranslation } from 'react-i18next'; const TestComponent = () => { const { t } = useTranslation(); return ( <div>{t('Hello World')}</div> ) }; export default TestComponent; |
...
Locales files are located in the files public/locales/{localeid}/translation.jsonwhere {localeid} is the name of any locale (it, fr, en, …). Files look like this:
| Code Block |
|---|
{
"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. See one example below:
...
Automatic extraction of keys from code files
Thanks to the babel-plugin-i18next-extractplugin, 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:
...
To do so, there are a few steps to follow:
Modify the top bar component to add the String calling the translation function
Adding the translations to the French and German localization files
Compiling DatafariUI
Modifying the top bar component
...