Skip to content
Library support to use react-i18next with the PhraseApp In-Context Editor
TypeScript JavaScript
Branch: master
Clone or download
theSoenke Merge pull request #20 from nlopin/update-dependencies
chore: update minor dependencies
Latest commit ffda44c Jul 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ tests: fix tests Jun 13, 2019
src Rename translate HOC to withNamespaces Nov 2, 2018
.gitignore
.travis.yml Update travis node version Nov 2, 2018
CODEOWNERS Create CODEOWNERS Feb 8, 2019
LICENSE
README.md Update README.md Nov 12, 2018
package-lock.json Merge pull request #20 from nlopin/update-dependencies Jul 11, 2019
package.json
tsconfig.json Switch to ts-loader Sep 17, 2018
webpack.config.js Switch to ts-loader Sep 17, 2018

README.md

react-i18next-phraseapp

Build Status

This library lets you integrate the PhraseApp In-Context Editor easily with your React apps localized with react-i18next.

Installation

Install the package via npm:

$ npm install react-i18next-phraseapp

Then, replace all calls to translate() with the translate function provided by react-i18next-phraseapp:

- import { withNamespaces } from 'react-i18next';
+ import { withNamespaces } from 'react-i18next-phraseapp';

Now, wrap your application with the PhraseAppProvider:

import { I18nextProvider } from 'react-i18next';
import { PhraseAppProvider } from 'react-i18next-phraseapp';

ReactDOM.render(
  <I18nextProvider i18n={ i18n }>
    <PhraseAppProvider config={ window.PHRASEAPP_CONFIG }>
      <MyApp />
    </PhraseAppProvider>
  </I18nextProvider>,
  document.getElementById('root')
);

As the last step, provide the PhraseApp configuration before your app is mounted:

 <div id="root"></div>
 <script>
   window.PHRASEAPP_ENABLED = true;
   window.PHRASEAPP_CONFIG = {
     projectId: "<project-id>",
     prefix: "[[__",
     suffix: "__]]",
     fullReparse: true
   };
 </script>
 <script src="bundle.js"></script>

Done.

Demo

You can find a demo project on GitHub.

Test

Run tests via jest:

$ npm test

Build

$ npm run build

Acknowledgements

Thank you to choffmeister for pointing us in the right direction.

You can’t perform that action at this time.