This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
In order for the Crowdin API queries to work - you will need REACT_APP_CROWDIN_APIKEY
& REACT_APP_CROWDIN_PROJECTID
env variables set in your root .env.development.local
file - please contact a dev if you need these.
There are two methods for adding translations, both are valid, and it depends on the context in which you are trying to implement the translation as to which you should use.
If you need to translate a string that exists within another string, i.e:
<span>
I need to translate this bit of the span. I don't need to translate this
second sentence.
</span>
Or, a string that is being passed into a component as props, i.e.:
<Component label="This text need translated" />
Then you should make use of the TranslateString
method within translateTextHelpers
.
It takes in the translationId
(found in Crowdin) as the first argument, and a string of fallback text as the second argument, which is rendered if the translation isn't found,
import { TranslateString } from '../translateTextHelpers'
<StyledLink>π― {TranslateString(282, 'SYRUP Pool')}</StyledLink>
import { TranslateString } from '../translateTextHelpers'
<Button text={`π ${TranslateString(292, 'Unlock Wallet')}`} />
This is a simple abstraction of the TranslateString
method, wrapping it within a React Component - this can be a visually simpler pattern, if you are wanting to translate standalone piece of text.
It takes in a translationId
prop and whatever is passed as {children}
is used for the fallback, i.e.:
<StyledLink to="/farms">
<TranslatedText translationId={278}>Farm</TranslatedText>
</StyledLink>
<StyledLink to="/staking">
<TranslatedText translationId={280}>Staking</TranslatedText>
</StyledLink>
The translation component can handle variables being passed in from Crowdin, with no code changes.
It will only work if there is only one variable passed in, and if that variable within Crowdin is wrapped in % signs, i.e.:
Translation in crowdin: %asset% Earned
link
Code:
<Label text={TranslateString(330, 'CAKE Earned')} />