React - translations per component
I'm using create-react-app for my React application and I'm currently trying to figure out translations.
Right now I have one big JSON file per locale and each locale file includes translations for all components - which is not ideal and I would like to have separate translation files for each component.
So the structure of locales will look like this:
ComponentA
- locales
- en.json
- sk.json
ComponentB
- locales
- en.json
- sk.json
What is the best way to achieve this? Which modules should I use to achieve this?
I do not want to include these locale files into build because we will support 10 languages so the bundle size will be too big.
reactjs internationalization translation create-react-app i18next
asked Nov 15 '18 at 6:28
Palo DelinčákPalo Delinčák
1921210
add a comment |
I'm using create-react-app for my React application and I'm currently trying to figure out translations.
Right now I have one big JSON file per locale and each locale file includes translations for all components - which is not ideal and I would like to have separate translation files for each component.
So the structure of locales will look like this:
ComponentA
- locales
- en.json
- sk.json
ComponentB
- locales
- en.json
- sk.json
What is the best way to achieve this? Which modules should I use to achieve this?
I do not want to include these locale files into build because we will support 10 languages so the bundle size will be too big.
reactjs internationalization translation create-react-app i18next
asked Nov 15 '18 at 6:28
Palo DelinčákPalo Delinčák
1921210
github.com/i18next/react-i18next using i18next namepaces per component
– jamuhl
Nov 15 '18 at 11:51
@jamuhl Thank you - yes this will work fine. However when loading namespaces via XHR, then locale files needs to be under public directory in my app. I would rather keep them next to component so it's easy to navigate.
– Palo Delinčák
Nov 18 '18 at 7:53
@jamuhl And also another issue is that one page can easily have 100 components. And in this case 100 requests will be fired to load all locales so I think this is not a good thing.
– Palo Delinčák
Nov 18 '18 at 7:59
add a comment |
I'm using create-react-app for my React application and I'm currently trying to figure out translations.
Right now I have one big JSON file per locale and each locale file includes translations for all components - which is not ideal and I would like to have separate translation files for each component.
So the structure of locales will look like this:
ComponentA
- locales
- en.json
- sk.json
ComponentB
- locales
- en.json
- sk.json
What is the best way to achieve this? Which modules should I use to achieve this?
I do not want to include these locale files into build because we will support 10 languages so the bundle size will be too big.
reactjs internationalization translation create-react-app i18next
asked Nov 15 '18 at 6:28
Palo DelinčákPalo Delinčák
1921210
I'm using create-react-app for my React application and I'm currently trying to figure out translations.
Right now I have one big JSON file per locale and each locale file includes translations for all components - which is not ideal and I would like to have separate translation files for each component.
So the structure of locales will look like this:
ComponentA
- locales
- en.json
- sk.json
ComponentB
- locales
- en.json
- sk.json
What is the best way to achieve this? Which modules should I use to achieve this?
I do not want to include these locale files into build because we will support 10 languages so the bundle size will be too big.
reactjs internationalization translation create-react-app i18next
reactjs internationalization translation create-react-app i18next
asked Nov 15 '18 at 6:28
Palo DelinčákPalo Delinčák
1921210
asked Nov 15 '18 at 6:28
Palo DelinčákPalo Delinčák
1921210
asked Nov 15 '18 at 6:28
Palo DelinčákPalo Delinčák
1921210
asked Nov 15 '18 at 6:28
Palo DelinčákPalo Delinčák
1921210
asked Nov 15 '18 at 6:28
Palo DelinčákPalo Delinčák
1921210
1921210
github.com/i18next/react-i18next using i18next namepaces per component
– jamuhl
Nov 15 '18 at 11:51
@jamuhl Thank you - yes this will work fine. However when loading namespaces via XHR, then locale files needs to be under public directory in my app. I would rather keep them next to component so it's easy to navigate.
– Palo Delinčák
Nov 18 '18 at 7:53
@jamuhl And also another issue is that one page can easily have 100 components. And in this case 100 requests will be fired to load all locales so I think this is not a good thing.
– Palo Delinčák
Nov 18 '18 at 7:59
add a comment |
github.com/i18next/react-i18next using i18next namepaces per component
– jamuhl
Nov 15 '18 at 11:51
@jamuhl Thank you - yes this will work fine. However when loading namespaces via XHR, then locale files needs to be under public directory in my app. I would rather keep them next to component so it's easy to navigate.
– Palo Delinčák
Nov 18 '18 at 7:53
@jamuhl And also another issue is that one page can easily have 100 components. And in this case 100 requests will be fired to load all locales so I think this is not a good thing.
– Palo Delinčák
Nov 18 '18 at 7:59
github.com/i18next/react-i18next using i18next namepaces per component
– jamuhl
Nov 15 '18 at 11:51
github.com/i18next/react-i18next using i18next namepaces per component
– jamuhl
Nov 15 '18 at 11:51
@jamuhl Thank you - yes this will work fine. However when loading namespaces via XHR, then locale files needs to be under public directory in my app. I would rather keep them next to component so it's easy to navigate.
– Palo Delinčák
Nov 18 '18 at 7:53
@jamuhl Thank you - yes this will work fine. However when loading namespaces via XHR, then locale files needs to be under public directory in my app. I would rather keep them next to component so it's easy to navigate.
– Palo Delinčák
Nov 18 '18 at 7:53
@jamuhl And also another issue is that one page can easily have 100 components. And in this case 100 requests will be fired to load all locales so I think this is not a good thing.
– Palo Delinčák
Nov 18 '18 at 7:59
@jamuhl And also another issue is that one page can easily have 100 components. And in this case 100 requests will be fired to load all locales so I think this is not a good thing.
– Palo Delinčák
Nov 18 '18 at 7:59
add a comment |
1 Answer
1
active
oldest
votes
I'm going to answer my own question. After research I figured out that my use-case is rare and I decided to do some locale pre-processing to achieve desired functionality.
I'm running default config of create-react-app together with react-i18next and my file structure looks like this:
src
- Component A
- locales
- en.json
- sk.json
- Component B
- locales
- en.jsonHere are settings for the react-i18next module:
i18n
.use(Backend)
.use('en')
.use(reactI18nextModule)
.init(
fallbackLng: 'en',
debug: false,
backend:
loadPath: function()
return `$config.BASE_URLlocales/lng.json`;
,
react:
wait: true
);Since I'm using default config of create-react-app then the locales are served from public folder in the app and build itself.
And now it gets tricky. Since the locale files are located in the component tree (and not in public folder) then we need to do some pre-processing of locales - basically we need to concat all JSON files and move them to the public folder.
Files for public folder are created on the fly using node task (prepare-locales.js) below:
const jsonConcat = require('json-concat');
const minifyJson = require('minify-json');
const glob = require('glob');
const availableLocales = ['en', 'sk'];
const path = require('path');
module.exports.development = function()
availableLocales.forEach(locale =>
glob(`./src/**/locales/$locale.json`, , (err, globFiles) =>
if (globFiles.length)
const file = `./public/locales/$locale.json`;
jsonConcat(
src: globFiles,
dest: file
,
json =>
minifyJson(file);
);
);
);
;
module.exports.production = function()
glob('./build/static/js/main.*.js', , (err, globFiles) =>
const files = require('source-map-explorer')(globFiles[0]).files;
let localeFolders = ;
Object.keys(files).forEach(fileName =>
localeFolders.push(path.dirname(fileName).replace('./', ''));
);
localeFolders = [...new Set(localeFolders)];
availableLocales.forEach(locale =>
const localeFiles = localeFolders.map(
lf => `./src/$lf/locales/$locale.json`
);
if (localeFiles.length)
const file = `./build/locales/$locale.json`;
jsonConcat(
src: localeFiles,
dest: file
,
json =>
minifyJson(file);
);
);
);
;For the development version I'm concating all JSON files which are found in the tree.
For the production version I'm using source-map-explorer and I'm concating only those locales which are used in the build.
Here is my simplified package.json with tasks required for this to work:
"devDependencies":
"json-concat": "0.0.1",
"minify-json": "^1.0.0",
"npm-watch": "^0.4.0",
"path": "^0.12.7",
"react-scripts": "2.1.1",
"source-map-explorer": "^1.6.0"
,
"scripts":
"start": "react-scripts start & npm run prepare-locales:development:watch",
"build:production": "react-scripts build && npm run prepare-locales:production",
"prepare-locales:development:watch": "npm-watch prepare-locales:development",
"prepare-locales:development": "node -e 'require("./prepare-locales.js").development()'",
"prepare-locales:production": "node -e 'require("./prepare-locales.js").production()'"
,
"watch":
"prepare-locales:development":
"patterns": "src/**/locales/",
"extensions": "json"
Maybe it's not the best solution but it works for my use-case and hopefully it will help someone with similar issues.
answered Nov 22 '18 at 15:08
Palo DelinčákPalo Delinčák
1921210
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53313624%2freact-translations-per-component%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I'm going to answer my own question. After research I figured out that my use-case is rare and I decided to do some locale pre-processing to achieve desired functionality.
I'm running default config of create-react-app together with react-i18next and my file structure looks like this:
src
- Component A
- locales
- en.json
- sk.json
- Component B
- locales
- en.jsonHere are settings for the react-i18next module:
i18n
.use(Backend)
.use('en')
.use(reactI18nextModule)
.init(
fallbackLng: 'en',
debug: false,
backend:
loadPath: function()
return `$config.BASE_URLlocales/lng.json`;
,
react:
wait: true
);Since I'm using default config of create-react-app then the locales are served from public folder in the app and build itself.
And now it gets tricky. Since the locale files are located in the component tree (and not in public folder) then we need to do some pre-processing of locales - basically we need to concat all JSON files and move them to the public folder.
Files for public folder are created on the fly using node task (prepare-locales.js) below:
const jsonConcat = require('json-concat');
const minifyJson = require('minify-json');
const glob = require('glob');
const availableLocales = ['en', 'sk'];
const path = require('path');
module.exports.development = function()
availableLocales.forEach(locale =>
glob(`./src/**/locales/$locale.json`, , (err, globFiles) =>
if (globFiles.length)
const file = `./public/locales/$locale.json`;
jsonConcat(
src: globFiles,
dest: file
,
json =>
minifyJson(file);
);
);
);
;
module.exports.production = function()
glob('./build/static/js/main.*.js', , (err, globFiles) =>
const files = require('source-map-explorer')(globFiles[0]).files;
let localeFolders = ;
Object.keys(files).forEach(fileName =>
localeFolders.push(path.dirname(fileName).replace('./', ''));
);
localeFolders = [...new Set(localeFolders)];
availableLocales.forEach(locale =>
const localeFiles = localeFolders.map(
lf => `./src/$lf/locales/$locale.json`
);
if (localeFiles.length)
const file = `./build/locales/$locale.json`;
jsonConcat(
src: localeFiles,
dest: file
,
json =>
minifyJson(file);
);
);
);
;For the development version I'm concating all JSON files which are found in the tree.
For the production version I'm using source-map-explorer and I'm concating only those locales which are used in the build.
Here is my simplified package.json with tasks required for this to work:
"devDependencies":
"json-concat": "0.0.1",
"minify-json": "^1.0.0",
"npm-watch": "^0.4.0",
"path": "^0.12.7",
"react-scripts": "2.1.1",
"source-map-explorer": "^1.6.0"
,
"scripts":
"start": "react-scripts start & npm run prepare-locales:development:watch",
"build:production": "react-scripts build && npm run prepare-locales:production",
"prepare-locales:development:watch": "npm-watch prepare-locales:development",
"prepare-locales:development": "node -e 'require("./prepare-locales.js").development()'",
"prepare-locales:production": "node -e 'require("./prepare-locales.js").production()'"
,
"watch":
"prepare-locales:development":
"patterns": "src/**/locales/",
"extensions": "json"
Maybe it's not the best solution but it works for my use-case and hopefully it will help someone with similar issues.
answered Nov 22 '18 at 15:08
Palo DelinčákPalo Delinčák
1921210
add a comment |
I'm going to answer my own question. After research I figured out that my use-case is rare and I decided to do some locale pre-processing to achieve desired functionality.
I'm running default config of create-react-app together with react-i18next and my file structure looks like this:
src
- Component A
- locales
- en.json
- sk.json
- Component B
- locales
- en.jsonHere are settings for the react-i18next module:
i18n
.use(Backend)
.use('en')
.use(reactI18nextModule)
.init(
fallbackLng: 'en',
debug: false,
backend:
loadPath: function()
return `$config.BASE_URLlocales/lng.json`;
,
react:
wait: true
);Since I'm using default config of create-react-app then the locales are served from public folder in the app and build itself.
And now it gets tricky. Since the locale files are located in the component tree (and not in public folder) then we need to do some pre-processing of locales - basically we need to concat all JSON files and move them to the public folder.
Files for public folder are created on the fly using node task (prepare-locales.js) below:
const jsonConcat = require('json-concat');
const minifyJson = require('minify-json');
const glob = require('glob');
const availableLocales = ['en', 'sk'];
const path = require('path');
module.exports.development = function()
availableLocales.forEach(locale =>
glob(`./src/**/locales/$locale.json`, , (err, globFiles) =>
if (globFiles.length)
const file = `./public/locales/$locale.json`;
jsonConcat(
src: globFiles,
dest: file
,
json =>
minifyJson(file);
);
);
);
;
module.exports.production = function()
glob('./build/static/js/main.*.js', , (err, globFiles) =>
const files = require('source-map-explorer')(globFiles[0]).files;
let localeFolders = ;
Object.keys(files).forEach(fileName =>
localeFolders.push(path.dirname(fileName).replace('./', ''));
);
localeFolders = [...new Set(localeFolders)];
availableLocales.forEach(locale =>
const localeFiles = localeFolders.map(
lf => `./src/$lf/locales/$locale.json`
);
if (localeFiles.length)
const file = `./build/locales/$locale.json`;
jsonConcat(
src: localeFiles,
dest: file
,
json =>
minifyJson(file);
);
);
);
;For the development version I'm concating all JSON files which are found in the tree.
For the production version I'm using source-map-explorer and I'm concating only those locales which are used in the build.
Here is my simplified package.json with tasks required for this to work:
"devDependencies":
"json-concat": "0.0.1",
"minify-json": "^1.0.0",
"npm-watch": "^0.4.0",
"path": "^0.12.7",
"react-scripts": "2.1.1",
"source-map-explorer": "^1.6.0"
,
"scripts":
"start": "react-scripts start & npm run prepare-locales:development:watch",
"build:production": "react-scripts build && npm run prepare-locales:production",
"prepare-locales:development:watch": "npm-watch prepare-locales:development",
"prepare-locales:development": "node -e 'require("./prepare-locales.js").development()'",
"prepare-locales:production": "node -e 'require("./prepare-locales.js").production()'"
,
"watch":
"prepare-locales:development":
"patterns": "src/**/locales/",
"extensions": "json"
Maybe it's not the best solution but it works for my use-case and hopefully it will help someone with similar issues.
answered Nov 22 '18 at 15:08
Palo DelinčákPalo Delinčák
1921210
add a comment |
I'm going to answer my own question. After research I figured out that my use-case is rare and I decided to do some locale pre-processing to achieve desired functionality.
I'm running default config of create-react-app together with react-i18next and my file structure looks like this:
src
- Component A
- locales
- en.json
- sk.json
- Component B
- locales
- en.jsonHere are settings for the react-i18next module:
i18n
.use(Backend)
.use('en')
.use(reactI18nextModule)
.init(
fallbackLng: 'en',
debug: false,
backend:
loadPath: function()
return `$config.BASE_URLlocales/lng.json`;
,
react:
wait: true
);Since I'm using default config of create-react-app then the locales are served from public folder in the app and build itself.
And now it gets tricky. Since the locale files are located in the component tree (and not in public folder) then we need to do some pre-processing of locales - basically we need to concat all JSON files and move them to the public folder.
Files for public folder are created on the fly using node task (prepare-locales.js) below:
const jsonConcat = require('json-concat');
const minifyJson = require('minify-json');
const glob = require('glob');
const availableLocales = ['en', 'sk'];
const path = require('path');
module.exports.development = function()
availableLocales.forEach(locale =>
glob(`./src/**/locales/$locale.json`, , (err, globFiles) =>
if (globFiles.length)
const file = `./public/locales/$locale.json`;
jsonConcat(
src: globFiles,
dest: file
,
json =>
minifyJson(file);
);
);
);
;
module.exports.production = function()
glob('./build/static/js/main.*.js', , (err, globFiles) =>
const files = require('source-map-explorer')(globFiles[0]).files;
let localeFolders = ;
Object.keys(files).forEach(fileName =>
localeFolders.push(path.dirname(fileName).replace('./', ''));
);
localeFolders = [...new Set(localeFolders)];
availableLocales.forEach(locale =>
const localeFiles = localeFolders.map(
lf => `./src/$lf/locales/$locale.json`
);
if (localeFiles.length)
const file = `./build/locales/$locale.json`;
jsonConcat(
src: localeFiles,
dest: file
,
json =>
minifyJson(file);
);
);
);
;For the development version I'm concating all JSON files which are found in the tree.
For the production version I'm using source-map-explorer and I'm concating only those locales which are used in the build.
Here is my simplified package.json with tasks required for this to work:
"devDependencies":
"json-concat": "0.0.1",
"minify-json": "^1.0.0",
"npm-watch": "^0.4.0",
"path": "^0.12.7",
"react-scripts": "2.1.1",
"source-map-explorer": "^1.6.0"
,
"scripts":
"start": "react-scripts start & npm run prepare-locales:development:watch",
"build:production": "react-scripts build && npm run prepare-locales:production",
"prepare-locales:development:watch": "npm-watch prepare-locales:development",
"prepare-locales:development": "node -e 'require("./prepare-locales.js").development()'",
"prepare-locales:production": "node -e 'require("./prepare-locales.js").production()'"
,
"watch":
"prepare-locales:development":
"patterns": "src/**/locales/",
"extensions": "json"
Maybe it's not the best solution but it works for my use-case and hopefully it will help someone with similar issues.
answered Nov 22 '18 at 15:08
Palo DelinčákPalo Delinčák
1921210
I'm going to answer my own question. After research I figured out that my use-case is rare and I decided to do some locale pre-processing to achieve desired functionality.
I'm running default config of create-react-app together with react-i18next and my file structure looks like this:
src
- Component A
- locales
- en.json
- sk.json
- Component B
- locales
- en.jsonHere are settings for the react-i18next module:
i18n
.use(Backend)
.use('en')
.use(reactI18nextModule)
.init(
fallbackLng: 'en',
debug: false,
backend:
loadPath: function()
return `$config.BASE_URLlocales/lng.json`;
,
react:
wait: true
);Since I'm using default config of create-react-app then the locales are served from public folder in the app and build itself.
And now it gets tricky. Since the locale files are located in the component tree (and not in public folder) then we need to do some pre-processing of locales - basically we need to concat all JSON files and move them to the public folder.
Files for public folder are created on the fly using node task (prepare-locales.js) below:
const jsonConcat = require('json-concat');
const minifyJson = require('minify-json');
const glob = require('glob');
const availableLocales = ['en', 'sk'];
const path = require('path');
module.exports.development = function()
availableLocales.forEach(locale =>
glob(`./src/**/locales/$locale.json`, , (err, globFiles) =>
if (globFiles.length)
const file = `./public/locales/$locale.json`;
jsonConcat(
src: globFiles,
dest: file
,
json =>
minifyJson(file);
);
);
);
;
module.exports.production = function()
glob('./build/static/js/main.*.js', , (err, globFiles) =>
const files = require('source-map-explorer')(globFiles[0]).files;
let localeFolders = ;
Object.keys(files).forEach(fileName =>
localeFolders.push(path.dirname(fileName).replace('./', ''));
);
localeFolders = [...new Set(localeFolders)];
availableLocales.forEach(locale =>
const localeFiles = localeFolders.map(
lf => `./src/$lf/locales/$locale.json`
);
if (localeFiles.length)
const file = `./build/locales/$locale.json`;
jsonConcat(
src: localeFiles,
dest: file
,
json =>
minifyJson(file);
);
);
);
;For the development version I'm concating all JSON files which are found in the tree.
For the production version I'm using source-map-explorer and I'm concating only those locales which are used in the build.
Here is my simplified package.json with tasks required for this to work:
"devDependencies":
"json-concat": "0.0.1",
"minify-json": "^1.0.0",
"npm-watch": "^0.4.0",
"path": "^0.12.7",
"react-scripts": "2.1.1",
"source-map-explorer": "^1.6.0"
,
"scripts":
"start": "react-scripts start & npm run prepare-locales:development:watch",
"build:production": "react-scripts build && npm run prepare-locales:production",
"prepare-locales:development:watch": "npm-watch prepare-locales:development",
"prepare-locales:development": "node -e 'require("./prepare-locales.js").development()'",
"prepare-locales:production": "node -e 'require("./prepare-locales.js").production()'"
,
"watch":
"prepare-locales:development":
"patterns": "src/**/locales/",
"extensions": "json"
Maybe it's not the best solution but it works for my use-case and hopefully it will help someone with similar issues.
src
- Component A
- locales
- en.json
- sk.json
- Component B
- locales
- en.jsonsrc
- Component A
- locales
- en.json
- sk.json
- Component B
- locales
- en.jsoni18n
.use(Backend)
.use('en')
.use(reactI18nextModule)
.init(
fallbackLng: 'en',
debug: false,
backend:
loadPath: function()
return `$config.BASE_URLlocales/lng.json`;
,
react:
wait: true
);i18n
.use(Backend)
.use('en')
.use(reactI18nextModule)
.init(
fallbackLng: 'en',
debug: false,
backend:
loadPath: function()
return `$config.BASE_URLlocales/lng.json`;
,
react:
wait: true
);const jsonConcat = require('json-concat');
const minifyJson = require('minify-json');
const glob = require('glob');
const availableLocales = ['en', 'sk'];
const path = require('path');
module.exports.development = function()
availableLocales.forEach(locale =>
glob(`./src/**/locales/$locale.json`, , (err, globFiles) =>
if (globFiles.length)
const file = `./public/locales/$locale.json`;
jsonConcat(
src: globFiles,
dest: file
,
json =>
minifyJson(file);
);
);
);
;
module.exports.production = function()
glob('./build/static/js/main.*.js', , (err, globFiles) =>
const files = require('source-map-explorer')(globFiles[0]).files;
let localeFolders = ;
Object.keys(files).forEach(fileName =>
localeFolders.push(path.dirname(fileName).replace('./', ''));
);
localeFolders = [...new Set(localeFolders)];
availableLocales.forEach(locale =>
const localeFiles = localeFolders.map(
lf => `./src/$lf/locales/$locale.json`
);
if (localeFiles.length)
const file = `./build/locales/$locale.json`;
jsonConcat(
src: localeFiles,
dest: file
,
json =>
minifyJson(file);
);
);
);
;const jsonConcat = require('json-concat');
const minifyJson = require('minify-json');
const glob = require('glob');
const availableLocales = ['en', 'sk'];
const path = require('path');
module.exports.development = function()
availableLocales.forEach(locale =>
glob(`./src/**/locales/$locale.json`, , (err, globFiles) =>
if (globFiles.length)
const file = `./public/locales/$locale.json`;
jsonConcat(
src: globFiles,
dest: file
,
json =>
minifyJson(file);
);
);
);
;
module.exports.production = function()
glob('./build/static/js/main.*.js', , (err, globFiles) =>
const files = require('source-map-explorer')(globFiles[0]).files;
let localeFolders = ;
Object.keys(files).forEach(fileName =>
localeFolders.push(path.dirname(fileName).replace('./', ''));
);
localeFolders = [...new Set(localeFolders)];
availableLocales.forEach(locale =>
const localeFiles = localeFolders.map(
lf => `./src/$lf/locales/$locale.json`
);
if (localeFiles.length)
const file = `./build/locales/$locale.json`;
jsonConcat(
src: localeFiles,
dest: file
,
json =>
minifyJson(file);
);
);
);
;
"devDependencies":
"json-concat": "0.0.1",
"minify-json": "^1.0.0",
"npm-watch": "^0.4.0",
"path": "^0.12.7",
"react-scripts": "2.1.1",
"source-map-explorer": "^1.6.0"
,
"scripts":
"start": "react-scripts start & npm run prepare-locales:development:watch",
"build:production": "react-scripts build && npm run prepare-locales:production",
"prepare-locales:development:watch": "npm-watch prepare-locales:development",
"prepare-locales:development": "node -e 'require("./prepare-locales.js").development()'",
"prepare-locales:production": "node -e 'require("./prepare-locales.js").production()'"
,
"watch":
"prepare-locales:development":
"patterns": "src/**/locales/",
"extensions": "json"
"devDependencies":
"json-concat": "0.0.1",
"minify-json": "^1.0.0",
"npm-watch": "^0.4.0",
"path": "^0.12.7",
"react-scripts": "2.1.1",
"source-map-explorer": "^1.6.0"
,
"scripts":
"start": "react-scripts start & npm run prepare-locales:development:watch",
"build:production": "react-scripts build && npm run prepare-locales:production",
"prepare-locales:development:watch": "npm-watch prepare-locales:development",
"prepare-locales:development": "node -e 'require("./prepare-locales.js").development()'",
"prepare-locales:production": "node -e 'require("./prepare-locales.js").production()'"
,
"watch":
"prepare-locales:development":
"patterns": "src/**/locales/",
"extensions": "json"
answered Nov 22 '18 at 15:08
Palo DelinčákPalo Delinčák
1921210
answered Nov 22 '18 at 15:08
Palo DelinčákPalo Delinčák
1921210
answered Nov 22 '18 at 15:08
Palo DelinčákPalo Delinčák
1921210
answered Nov 22 '18 at 15:08
Palo DelinčákPalo Delinčák
1921210
1921210
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53313624%2freact-translations-per-component%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
github.com/i18next/react-i18next using i18next namepaces per component
– jamuhl
Nov 15 '18 at 11:51
@jamuhl Thank you - yes this will work fine. However when loading namespaces via XHR, then locale files needs to be under public directory in my app. I would rather keep them next to component so it's easy to navigate.
– Palo Delinčák
Nov 18 '18 at 7:53
@jamuhl And also another issue is that one page can easily have 100 components. And in this case 100 requests will be fired to load all locales so I think this is not a good thing.
– Palo Delinčák
Nov 18 '18 at 7:59