Comments (7)
I didn't understand much? Can you give an example on 'defining a message'? THere are json files and used with syntax similar to react-intl if thats what you mean?
from react-boilerplate-cra-template.
Oh, sorry for making you confused by unclear description!
I meant, how we define the message inputs for extracting to json file more structure?
In this react-boilerplate, we define all messages in messages.js
for each page/component. Then, run command to extract them to json files.
yarn extract-intl
It is quite easier to handle messages because I just need to define and find them in messages.js
files when needed.
In this react-boilerplate-cra-template, I see that we define messages in .tsx
file directly. So, I'd like to know if we have a way to define messages in messages.js
file with react-i18next such as react-intl? @Can-Sahin
from react-boilerplate-cra-template.
Well you define messages in JSON files like react-intl
and you use them in ts
or js
files(doesn't matter the type) like here. There is no file similar to message.js
. All the translations are available through hooks. Its highly customizable anyway. You can divide your messages in the nested structures or load them through a backend server or have your backend get called with missing translations etc etc...
If you want to extract message there are these options you can try. Extracting messages aren't implemented here.
from react-boilerplate-cra-template.
Thanks @Can-Sahin!
I'm looking forward extracting messages feature is implemented if possible in future.
from react-boilerplate-cra-template.
After a while of researching. I'd give my way to someone wanna define messages in such a messages.js
. BTW, I'm using i18nxt-scanner to extract the messages to JSON file.
i18next-scanner.config.js
module.exports = {
input: [
'src/app/**/*.{js,jsx}',
// Use ! to filter out files or directories
'!app/**/*.spec.{js,jsx}',
'!app/i18n/**',
'!**/node_modules/**',
],
output: './',
options: {
debug: true,
removeUnusedKeys: true,
func: {
list: ['getTranslationId'],
extensions: ['.js', '.tsx'],
},
lngs: ['en', 'ko'],
ns: ['translation'],
defaultLng: 'en',
defaultNs: 'translation',
defaultValue: '',
resource: {
loadPath: 'src/locales/{{lng}}/{{ns}}.json',
savePath: 'src/locales/{{lng}}/{{ns}}.json',
jsonIndent: 2,
lineEnding: '\n',
},
nsSeparator: false, // namespace separator
keySeparator: false, // key separator
interpolation: {
prefix: '{{',
suffix: '}}',
},
},
};
messages.js
import { getTranslationId } from 'locales/utils';
const messages = {
title: getTranslationId('Homepage_title', {
defaultValue: 'hello, {{name}}',
}),
count: getTranslationId('Homepage_count', {
defaultValue: '{{count}} time',
count: 0, // for plurals
}),
};
export default messages;
locales/utils.js
export const getTranslationId = id => {
if (!id || !id.includes('_'))
throw new Error('ID pattern should be "BLOCK_ElEMENT"');
return id;
};
Extracting command
yarn run i18next-scanner
Hope this helps! :D
from react-boilerplate-cra-template.
Can you share more details on this? I am trying to implement the i18next-scanner
but without using string approach (which sacrifices the compile time safety) its pretty hard to implement something.
Whats the getTranslationId
? Is there any source code open sources I can see?
from react-boilerplate-cra-template.
Well, that is my custom function (it was also included in my previous comment) which gives i18next-scanner
a clue when it's scanning messages. You can see that I modified the i18next-scanner.config.js
file also to adapt for this purpose. @Can-Sahin
list: ['getTranslationId'],
from react-boilerplate-cra-template.
Related Issues (20)
- This is the most retarded boilerplate I have ever seen HOT 2
- There is a way to use TailwindCSS on this boilerplate ? HOT 8
- Automating releases, tags, version, and the generation of the CHANGELOG.md file with github actions HOT 1
- Unable to resolve dependency tree HOT 3
- useInjectReducer updates store, leading to warning "Cannot update a component (x) while rendering a different component..." HOT 6
- Routing through <Link/> and <Navlink/> react-router-dom components did not work properly HOT 1
- How to setup Micro Front End apps with this template HOT 1
- How can i configured webpack for optimise.
- How to jump page in saga HOT 1
- Similar template for Next.js HOT 1
- CSS with Media Queries are Not Minified (SOLUTION ATTACHED) HOT 2
- Doesn't work until you manually add devDependencies to package.json HOT 1
- Installing and starting the template app results in the error 'Plugin "react" was conflicted between ".eslintrc.js"' HOT 2
- about Emotion css-in-js HOT 5
- Ejecting from CRA HOT 1
- yarn start gives error about styled-components with babel-plugin-macros. HOT 1
- Request to Make This Repository a Template HOT 1
- When we get new changes? HOT 1
- Unable to create React App with node 20 and yarn 4
- Discontinued ! (Checkout the example)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-boilerplate-cra-template.