Page Comparison

...

All you need to do is to encode your component and open a PR. You should not see any changes at this step - please, check the text and links - everything should work as it was before. If so - open a PR, add a note that this PR is internationalisation of a component.

Produce unique message ids in a format component.id (e.g. home.welcome or carousel.title) in <FormattedMessage id="<ID>" defaultMessage=<ENGLISH LINE AS IT WAS BEFORE>/>

Some things require a bit more work, see examples. This is when a line includes some parts which do no need to be translated (like tags or links, example 2) Or where a property of another component needs to be translated (like alt of an img, example3)

You should not add anything to intl/en.json file - this will be done automatically. If you want to test this locally - you need to run

npm run build,

wait the build to be finished, then exit and run

npm run langs

(This is not very convinient, I'm working on improving that, but this is minor issue and this is how they do it in howTOs)

[React Intl] Missing message: "home.3.step_1" for locale: "ru", using default message as fallback. ← This is OK - those messages will go away as soon as we translate the elements.

...

Code Block

language	xml
theme	Emacs

<Component>.contextTypes = { //instead of Component - the name of your component, e.g. Home or Carousel
    intl: React.PropTypes.object.isRequired
};

Step 3. Encode all strings to be collected for translation. Please, do not forget to encode "alt", "area-label" and other accessibility features. Those ones can be a bit tricky, see example 3 below:

#

As Is

To Be

1

Code Block

language	xml
theme	Emacs
title	Plain text line

<h2 className="ui center aligned grey header">
	SlideWiki revolutionises ...
</h2>

Code Block

language	xml
theme	Emacs
title	Plain text line

<h2 className="ui center aligned grey header">
	<FormattedMessage 
		id='home.slogan'
		defaultMessage='SlideWiki revolutionises...'
	/>
</h2>

OR:

Code Block

language	xml
theme	Emacs
title	Plain text line (optional)

class Home extends React.Component {
    render() {
		...
		const messages = defineMessages({
            slogan:{
                id: 'home.slogan',
                defaultMessage: 'SlideWiki revolutionises...'
            }
        });
	
		return (
			...
			<FormattedMessage {...messages.slogan} />
			...
		)
	}
}

Note: the first way is recommended

2

Code Block

language	xml
theme	Emacs
title	A fragment with links

<p>
	If ... follow us on 
	<a target="_blank" href="https://twitter.com/SlideWiki">Twitter</a> 
	or visit the 
	<a href="https://slidewiki.eu">SlideWiki project website</a>.
</p>

Code Block

language	xml
theme	Emacs
title	A fragment with links

<p>
	<FormattedMessage 
		id='home.welcome12'
		values={{
			link_1: <a target="_blank" href="https://twitter.com/SlideWiki">Twitter</a>,
			link_2: <a href="https://slidewiki.eu">
                        <FormattedMessage
                             id="home.welcome12.1"
                             defaultMessage="SlideWiki project website"/>
                    </a>
		}}
		defaultMessage={'If ... follow us on {link_1} or visit the {link_2}.'}
	/>
</p>

Note: The text inside the first link ('Twitter') will not be translated, while the text inside the second link ('SlideWiki project website') will be translated

3

Code Block

language	xml
theme	Emacs
title	Text from component/tag property

<img 
	className="ui centered image" 
	src="/assets/images/logo_full.png"
	alt="SlideWiki beta logo"
/>

Code Block

language	xml
theme	Emacs
title	Text from component/tag property: Using a function

<FormattedMessage id="home.logo_alt" defaultMessage='SlideWiki beta logo'>
	{
		(alt) => <img 
					className="ui centered image" 
					src="/assets/images/logo_full.png" 
					alt={alt} 
			  	 />
	}
</FormattedMessage>

OR (as we probably will have this situation a lot):

Code Block

language	js
theme	Emacs
title	Text from component/tag property: Using a lower-level intl API

class Home extends React.Component {
    render() {
		...
		const messages = defineMessages({
    		logo_alt: {
            	id: 'home.logo_alt',
            	defaultMessage: 'SlideWiki beta logo',
        	}
    	});
	
		return (
			...
			<img 
				className="ui centered image"
				src="/assets/images/logo_full.png"
				alt={this.context.intl.formatMessage(messages.logo_alt)} 
			/>
			...
		)
	}
}

Home.contextTypes = {
    intl: React.PropTypes.object.isRequired
};


export default Home;

Note: The second way is recommended, however if there is only 1-2 cases in your component, the first way is better.

4

Code Block

language	xml
theme	Emacs
firstline	1
title	function with swal
linenumbers	true

function1(provider){ 		
	    swal({
            title: 'blub',
            text: 'see '+provider,
            type: 'error',
            confirmButtonText: 'Confirm',
            confirmButtonClass: 'negative ui button',
            buttonsStyling: false
        }).then().catch();
}

Code Block

language	xml
theme	Emacs
title	swal in components

	function1(provider){ 
		const messages = defineMessages({
            swal_text:{
                id: '<Component>.function1.swal_text',
                defaultMessage: 'see' + provider,
            },
			confirm_text:{
				id: '<Component>.function1.confirm_text',
                defaultMessage: 'Confirm',
			}
        });
	    swal({
            title: 'blub',
            text: this.context.intl.formatMessage(messages.swal_text),
            type: 'error',
            confirmButtonText: this.context.intl.formatMessage(messages.confirm_text),
            confirmButtonClass: 'negative ui button',
            buttonsStyling: false
        }).then().catch();
	}


...

ComponentName.contextTypes = {
    intl: React.PropTypes.object.isRequired
};

And thanks, Soledad Valero :

Code Block

language	xml
theme	Emacs
title	swal in actions

constructor(){
    super(props);
    this.messages = defineMessages({
        swal_text:{
            id: 'componentName.swal_text',
            defaultMessage:'see '+ provider
        },
	}
	swal({
            title: 'blub',
            text: this.context.intl.formatMessage(
                  this.messages.swal_text),
            type: 'error',
            confirmButtonText: 'Confirm',
            confirmButtonClass: 'negative ui button',
            buttonsStyling: false
    }).then().catch();
 
 
ComponentName.contextTypes = {
    intl: React.PropTypes.object.isRequired
};

The two solutions above throwing an error: SyntaxError: [React Intl] Messages must be statically evaluate-able for extraction.

My solution:

Code Block

language	js
theme	Midnight
title	Solution for dynamic texts with parameters

let messages = defineMessages({
                swal_text:{
                    id: 'LoginModal.text.incompleteProviderData',
                    defaultMessage: 'The data from {provider} was incomplete. In case you want to use this provider, please add an e-mail address at the provider itself and try again at SlideWiki.'
                },
            });
            swal({
                title: this.context.intl.formatMessage({
                    id: 'LoginModal.title.error',
                    defaultMessage: 'Error',
                }),
                text: this.context.intl.formatMessage(messages.swal_text, {
                        provider: provider
                    }),
                type: 'error',
                confirmButtonText: this.context.intl.formatMessage({
                    id: 'LoginModal.button.confirm',
                    defaultMessage: 'Confirm',
                }),
                confirmButtonClass: 'negative ui button',
                buttonsStyling: false
            }).then().catch();

5

Code Block

language	xml
theme	Emacs
title	Your input here

Code Block

language	xml
theme	Emacs
title	My output here =)

Note: or if you've solved your issue on your own, share it with others!

Related / todo after this (not part of dev task) → update the multilingual interface when new components have been encoded

Versions Compared

Old Version 7

New Version Current

Key

Step 3. Encode all strings to be collected for translation. Please, do not forget to encode "alt", "area-label" and other accessibility features. Those ones can be a bit tricky, see example 3 below: