I have an old project, uses something called phrase for translations.
Anyway, our translations files are *.properties and in react I could not find a way to handle them.
Usually I use i18next to handle tranlsation.json files in react
any idea what is the best for handle *.properties in react
an example about language.property file
header.shortcuts-screenreader=Listen
header.shortcuts-sign-in=Sign in
header.shortcuts-sign-out=Sign out
header.shortcuts-my-pages=My pages
header.shortcuts-new-to-the-library=New to the library?
header.shortcuts-join-the-library=Join the library
header.primary-navigation=Primary navigation
the output is something like this :
{
"sessionTimer": {
"accessibleTimingOut": "{{timeoutMinutes}} minutes until this page times out. Move your mouse pointer or press any key to extend the time with {{extendMinutes}} minutes.",
"reload": "Reload",
"timedOut": "The page has timed out and needs to be reloaded.",
"timingOut": "seconds until this page times out and needs to be reloaded. Move your mouse pointer or press any key to extend the time with {{extendMinutes}} minutes."
},
"header": {
"screenReaderLabel": "Listen",
"myAccountLabel": "Sign in",
"myAccountLogoutLabel": "Sign out",
"myAccountPagesLabel": "My pages",
"newToTheLibrary": "New to the library?",
"joinTheLibraryLabel": "Join the library",
"openingsLabel": "Opening hours",
"languageLabel": "Language"
},
"branchOpeningHours": {
"headerLabel": "Opening hours",
"closedLabel": "Closed",
"todayLabel": "Today",
"navigationBackLabel": "Back",
"navigationNextLabel": "Next",
"navigationPreviousLabel": "Previous",
"serviceTypeClosedLabel": "Closed",
"serviceTypeStaffedLabel": "Staffed",
"serviceTypeSelfServiceLabel": "Self-service",
"typeRegularLabel": "Regular",
"typeSpecialLabel": "Special",
"viewAllLabel": "Show all opening hours"
}
}
You could do something like the following
const data = `header.shortcuts-screenreader=Listen
header.shortcuts-sign-in=Sign in
header.primary-navigation=Primary navigation
footer.primary-link=Navigation
footer.shortcuts-sign-out=Sign out`;
const rows = data.split("\n").map((r) => {
return {
parent: r.split(".")[0],
child: r.split(".")[1].split("=")[0],
value: r.split(".")[1].split("=")[1]
}
});
const result = rows.reduce((acc, { parent, child, value }) => {
// convert to child from x-x to camel case
const camelChild = child.split("-").map((c, i) => {
return i === 0 ? c : c.charAt(0).toUpperCase() + c.slice(1, c.length)
}).join("");
// if property doesn't exist yet on outcome object
if (!acc[parent]) {
// create new object & assign first value
acc[parent] = { [camelChild]: value }
return acc; // return early
}
// otherwise
acc[parent][camelChild] = value; // assign value to property in object
return acc;
}, {});
console.log(result);