Skip to content
example using locize with react-intl
JavaScript HTML CSS
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.
extracted/messages/src
images
public
src
.babelrc
.env
.gitignore
README.md
package-lock.json
package.json
yarn.lock

README.md

locize-react-intl-example

This is a basic sample using locize with react-intl.

react-intl incontext editor

features supported:

  • splitting translations into multiple files
  • incontext editor
  • loading translations from locize CDN
  • detection of user language
  • automatically add new missing strings to your translation project
  • update changed strings in reference language
  • submit of description to context
  • setting last used information so you can savely remove keys not used any longer

Getting started

  1. Create an user account and create a project at https://locize.com and copy your projectId and API key (found in project -> settings) to the variables in src/locize/index.js -> here!

Important: make sure you toggle the publish format for your project to json flat and have the i18n format set to icu / messageformat! To match react-intl format of json when downloading.

react-intl features

  1. npm i && npm start and http://localhost:3000 should open automatically.

  2. Refresh your browser window with your locize project to see the newly added strings.

Open http://localhost:3000/?locize=true to show the incontext editor -> click a text fragment to edit it in locize

Add an additional language translate it using the locize UI. Open http://localhost:3000/?lng=de to eg. open app with english language. (Attention the call for supported languages is cached for performance reasons and might take 1 hour to reflect the newly added language support!).

For implementation details see comments in src/locize/index.js

You can’t perform that action at this time.