react-translatify

react-translatify

Convenience methods

• this.context.translate - a method for translating - more work to be done on this...

How translations work

The translations MUST be called through this.context.translate, and allows the user to translate plurals in the given language correctly. For example (irrelevant code removed):

class MyComponent extends Component {
	render() {
		return (<div>
			<h2>{this.context.translate('There {numItems|is 1 task|are # tasks} to be done', { numItems: 3 })}</h2>
		</div>)
	}
}

MyComponent.contextTypes = {
	translate: PropTypes.func
}

This will show a H2 with "There are 3 tasks to be done", now if you wanted this in say Danish, you simply add the language in config/settings.development.js and config/settings.development.js under the translations key like so:

"translations": ["da" ... other languages ...]

Then run:

node ./config/tools/getTranslations.js

Which will populate the "master" translations file /config/translate/translations.json, followed by:

node ./config/tools/updateTranslations.js

And the system will generate a file called: config/translate/translations.da.json, which will contain all they keys of the translations found in the "master" translations file. You then simply update the strings in matching fashion and save the file, for example:

"There {numItems|is 1 task|are # tasks} to be done": "Der er {numItems|1 opgave|# opgaver} at gøre"

What about decorating with tags?

<p>
	{this.context.translate('This example demonstrates an anchor tag (with an inner string translation) in this {number}, wow!', {
		number: {
			value: 3,
			display: value => <a title={this.context.translate('some other translation', { outputAsString: true })} href="javascript:void(0)">{value}</a> 
		}
	})}
</p>

So yeah, using an object with a value and a display function, you can decorate the output as you see fit.