Skip to content
Use react-intl with PhraseApp In-Context Editor
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ phraseapp.com -> app.phrase.com Aug 5, 2019
helper fix test helper Apr 25, 2017
src phraseapp.com -> app.phrase.com Aug 5, 2019
.gitignore Remove dist dir Mar 28, 2018
.travis.yml Update Jest to fix tests Mar 27, 2018
LICENSE Add MIT license file Feb 15, 2018
README.md Update README.md Nov 12, 2018
package-lock.json Update to 0.4.1 Aug 6, 2019
package.json Update to 0.4.1 Aug 6, 2019
tsconfig.json
webpack.config.js Use babel-runtime instead of polyfills Mar 27, 2018

README.md

react-intl-phraseapp

Build Status

react-intl-phraseapp is an addon for react-intl that lets you connect localized react applications to the PhraseApp In-Context Editor.

Prerequisites

To use react-intl-phraseapp with your application you have to:

Demo

You can find a demo project on GitHub.

Installation

via NPM:

npm install react-intl-phraseapp

Build form source

You can also build it directly from source to get the latest and greatest:

npm run dist

Development

npm install

Configure

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

JavaScript snippet

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.

Import from react-intl-phrasapp rather than from react-intl

Find all imports of FormattedMessage, FormattedHTMLMessage and change the source from react-intl to react-intl-phrasapp.

import {FormattedMessage} from 'react-intl-phraseapp'

How does it work?

The library inherits common components of the react-intl packages. In case you enabled PhraseApp by calling initializePhraseAppEditor the behaviour of the components will be changed.

Support

Question? Contact us at: phraseapp.com/contact

Issue? use GitHub issues and share the problem

Test

Run unit tests using jest:

npm test
You can’t perform that action at this time.