react-intl-phraseapp

The In-Context-Editor for react using react-intl

Usage no npm install needed!

<script type="module">
  import reactIntlPhraseapp from 'https://cdn.skypack.dev/react-intl-phraseapp';
</script>

README

react-intl-phraseapp

Build status

react-intl-phraseapp is an addon for react-intl that lets you connect localized react applications to the Phrase 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 from 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-phraseapp rather than from react-intl

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

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

Browser support

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.

How does it work

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.

Support

Question? Contact us at: phrase.com/contact

Issue? use GitHub issues and share the problem

Test

Run unit tests using jest:

npm test