Here, you will learn how to configure FormatJS with translation hosting feature. Translation hosting allows your users to see translated messages right away when you click the 'Publish' button in the translation
editor. Later, you will learn how to use <FormattedMessage/>
and intl
object.
Translation live updates
Let's start with learning how to integrate translation hosting feature to update translations right away when you click 'Publish' in the translation editor and a general configuration.
Install dependencies
Add react-intl
library to your React app project.
# Using NPM
npm i -S react react-intl
# Using yarn
yarn add react react-intl
Get project token
Create a project in SimpleLocalize, and get your project token from the 'Integrations' tab. You will need the token to fetch translations from the server.
React-intl configuration
Create configuration like below:
import React from "react";
import {IntlProvider} from 'react-intl'
import LanguageContext from "./LanguageContext";
class SimpleLocalize extends React.Component {
constructor(props) {
super(props);
this.state = {
messages: undefined,
language: "en"
};
}
componentDidMount() {
this.setupLanguageMessages(this.state.language);
}
setupLanguageMessages = (language) => {
const projectToken = "<YOUR_PROJECT_TOKEN>";
const translationsUrl = `https://cdn.simplelocalize.io/${projectToken}/_latest/${language}`;
return fetch(translationsUrl)
.then((data) => data.json())
.then((messages) => this.setState({language, messages}));
};
render() {
return (
<LanguageContext.Provider
value={{
changeLanguage: (language) => this.setupLanguageMessages(language)
}}>
<IntlProvider
locale={this.state.language}
messages={this.state.messages}>
{this.state.messages ? this.props.children : null}
</IntlProvider>
</LanguageContext.Provider>
)
}
}
export default SimpleLocalize;
Wrap main component
Wrap your main application component with the created SimpleLocalize
component to provide translations for React application.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import SimpleLocalize from "./SimpleLocalize";
ReactDOM.render(
<SimpleLocalize>
<App/>
</SimpleLocalize>,
document.getElementById('root')
);
FormattedMessage usage
<FormattedMessage id="YOUR_TRANSLATION_KEY"/>
React will convert the FormattedMessage
tag into a span
tag and put concrete translation into it. You can also use <FormattedHTMLMessage id="TRANSLATION_WITH_CSS"/>
which will also produce a message with HTML inside span
tag.
An example translation key could look like the following:
TRANSLATION_WITH_CSS = This is my <strong>text</strong>
Switching between languages
Use LanguageContext.Consumer
to switch languages.
<LanguageContext.Consumer>
{context => (<div className="App">
<button onClick={() => context.changeLanguage("en")}>English</button>
<button onClick={() => context.changeLanguage("es")}>Spanish</button>
</div>)}
</LanguageContext.Consumer>
Full application code is available on GitHub. Visit simplelocalize/simplelocalize-react-intl repository.
Edit your translations
Now you can edit messages in the translation editor and publish them using 'Save & Publish'. Your users will automatically see the changes!
Resources:
- Guide: FormatJS CLI integration - extract translation keys with FormatJS CLI
- Guide: SimpleLocalize CLI integration - extract translation keys with SimpleLocalize CLI
- Blog post: FormatJS and React application localization - read blog post about FormatJS and React localization
- Docs: FormatJS - FormatJS documentation page