react-intl-phraseapp is an addon for react-intl that lets you connect localized react applications to the Phrase In-Context Editor.
To use react-intl-phraseapp with your application you have to:
- Sign up for a Phrase account: https://app.phrase.com/signup
- Use the excellent react-intl module by yahoo for localization in your react app
You can find a demo project on GitHub.
npm install react-intl-phraseapp
You can also build it directly from source to get the latest and greatest:
npm run dist
npm install
let config = {
projectId: '<YOUR_PROJECT_ID>',
phraseEnabled: true,
prefix: "[[__",
suffix: "__]]",
fullReparse: true
};
You can find the Project-ID in the Project overview in the PhraseApp Translation Center
Add the following snippet to your react app.
import {initializePhraseAppEditor} from 'react-intl-phraseapp'
let config = {
projectId: '<YOUR_PROJECT_ID>',
phraseEnabled: true,
prefix: "[[__",
suffix: "__]]",
fullReparse: true
};
initializePhraseAppEditor(config);
If this does not work for you, you can also integrate the JavaScript snippet manually.
Find all imports of FormattedMessage
, and change the source from react-intl
to react-intl-phraseapp
.
import {FormattedMessage} from 'react-intl-phraseapp'
This library might not work out of the box for some older browser or IE11. We recommend to add Babel to the build pipeline if those browser need to be supported.
The library inherits common components of the react-intl packages. In case you enabled Phrase by calling initializePhraseAppEditor
the behaviour of the components will be changed.
Question? Contact us at: phrase.com/contact
Issue? use GitHub issues and share the problem
Run unit tests using jest:
npm test