# Getting started

# Compatibility

WARNING

i18next Phrase In-Context Editor Post Processor supports all i18next versions newer than 19.5.1 (opens new window). Although this library might work with previous versions as well, they're not officialy supported and might not get any specific updates or bug fixes.

# Installation

You can install the package with the use of your favorite package manager:

# yarn
yarn add i18next-phrase-in-context-editor-post-processor

# npm
npm install i18next-phrase-in-context-editor-post-processor

or load it via CDN:

<script src="https://unpkg.com/i18next-phrase-in-context-editor-post-processor"></script>

# Usage

Let's say this is how you bootstrap i18next (opens new window) in your application:

import i18next from 'i18next';
import i18nextXHRBackend from 'i18next-xhr-backend';

i18next
    .use(i18nextXHRBackend)
    .init({
        fallbackLng: 'en',
        debug: true,
        ns: ['special', 'common'],
        defaultNS: 'special',
        backend: {
            // load some translations from i18next-gitbook repo
            loadPath: 'https://raw.githubusercontent.com/i18next/i18next-gitbook/master/locales/{{lng}}/{{ns}}.json',
            crossDomain: true
        }
    }, function(err, t) {
        // do something on i18next initialization
    });

In this case, to integrate our library you only need to follow four simple steps:

Import a i18next Phrase In-Context Editor Post Processor library.
Create new i18next Phrase In-Context Editor Post Processor instance, passing PhraseConfig as the argument.
Pass newly created i18next Phrase In-Context Editor Post Processor instance to i18next use method (opens new window).
Add the "phraseInContextEditor" string to postProcess (opens new window) array property (passed within the configuration object of i18next init method (opens new window)).

Sounds easy enough, right? Let's have a look at an updated example:

import i18next from 'i18next';
import i18nextXHRBackend from 'i18next-xhr-backend';
import PhraseInContextEditorPostProcessor from 'i18next-phrase-in-context-editor-post-processor';

i18next
    .use(i18nextXHRBackend)
    .use(new PhraseInContextEditorPostProcessor({
        phraseEnabled: true,
        projectId: '<YOUR_PHRASE_PROJECT_ID>' // Project ID is found in project settings.
        accountId: '<YOUR_PHRASE_ACCOUNT_ID>' // Account ID is found in Strings organization settings.
    }))
    .init({
        fallbackLng: 'en',
        debug: true,
        ns: ['special', 'common'],
        defaultNS: 'special',
        backend: {
            // load some translations from i18next-gitbook repo
            loadPath: 'https://raw.githubusercontent.com/i18next/i18next-gitbook/master/locales/{{lng}}/{{ns}}.json',
            crossDomain: true
        },
        postProcess: ['phraseInContextEditor']
    }, function(err, t) {
        // do something on i18next initialization
    });

From now on, the In-Context Editor is fully integrated into your JS app. Congratulations! 🎉

To use the old version of ICE, use option useOldICE: true in your PHRASEAPP_CONFIG or integration options

i18n
    .use(new PhraseInContextEditorPostProcessor({
        phraseEnabled: true,
        projectId: '<YOUR_PROJECT_ID>',
        accountId: '<YOUR_ACCOUNT_ID>',
        useOldICE: true,
    }))

For further information about the possible configuration options and useful methods, please have a look at our API docs.

# Using the US Datacenter with ICE

In addition to the settings in your config, set the US datacenter to enable it working with the US endpoints.

  datacenter: 'us'

← Introduction API →