https://github.com/pureartisan/simple-i18n-react
React component for i18n using simple-i18n
https://github.com/pureartisan/simple-i18n-react
html-tags i18n internationalization localization react translation
Last synced: 5 months ago
JSON representation
React component for i18n using simple-i18n
- Host: GitHub
- URL: https://github.com/pureartisan/simple-i18n-react
- Owner: pureartisan
- License: apache-2.0
- Created: 2018-11-10T02:10:17.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T21:37:21.000Z (over 3 years ago)
- Last Synced: 2025-10-04T07:39:08.021Z (9 months ago)
- Topics: html-tags, i18n, internationalization, localization, react, translation
- Language: JavaScript
- Size: 1.05 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Simple I18n React [](https://badge.fury.io/js/%40pureartisan%2Fsimple-i18n-react) [](https://circleci.com/gh/pureartisan/simple-i18n-react)
React component for i18n translations using [@pureartisan/simple-i18n](https://github.com/pureartisan/simple-i18n).
This supports translations to have HTML tags that are safe to use (by avoiding updating the DOM html directly, disabling XSS).
## Installation
Note, this module has a peer-dependency with `@pureartisans/simple-i18n`. We decided to do that as this is an extension of `@pureartisans/simple-i18n` for react and we don't want to double-include the dependency in the distrubition.
```
npm install @pureartisans/simple-i18n-react @pureartisans/simple-i18n
```
## Getting started
For usage information of `@pureartisans/simple-i18n`, please checkout the [github repo](https://github.com/prageeth/simple-i18n).
## Translations
```
// ES5
var Translate = require('@pureartisans/simple-i18n-react');
// ES6
import Translate from '@pureartisans/simple-i18n-react';
// assuming i18n translations are already setup using SimpleI18n as below:
const languages = {
'en': {
'help-info.body': 'Lorem ipsum'
}
};
// let's create a simple component
const HelpInfo = () => (
);
```
## Dynamic variables
```
// assuming i18n translations are already setup using SimpleI18n as below:
const languages = {
'en': {
'profile-header.greeting': 'Hi {firstName}'
}
};
// let's create a simple component
const ProfileHeader = ({ user }) => (
);
```
## HTML tags
You are allowed to use basic HTML tags in the translations, with basic attributes. Attributes will be passed to the elements as props, so don't forget to use `className` instead of `class` for CSS classes.
```
const languages = {
'en': {
'help-info.body': 'For more information, visit our support page
Don\'t forget to leave us an amazing review.'
}
};
// let's create a simple component
const HelpInfo = () => (
);
// when rendered, will generate
```
***NOTE***
The link in the above example has been converted to a `#` when rendered, this is to prevent users accidentally clicking it and being redirected to another URL. In most cases, React applications will be a sinlge page application. In order to handle this link being clicked event, please see the [Link Click Handling](#link-click-handling)
***NOTE***
Illegal tags such as `script`, `iframe`, `img` are ignored and their content text will be displayed in the translation as static text:
```
'en': {
...
'illegal-translation': 'I have some alert('illegal'); translation'
...
};
// rendering
// will generate the following DOM with the content being static text
I have some alert('illegal'); translation
```
***NOTE***
Illegal attribtues such as any event handlers `onclick`, `onload`, `onkeypress` are ignored:
```
'en': {
...
'illegal-attributes': 'I have some
Click here translation'
...
};
// rendering
// will generate the following DOM with no event handlers
I have some Click here translation
```
You should not be using event handlers in translations. If you are in a situation that is required, then your code design is possibly flawed and is opening up to future issues. We recommend refactoring the approach.
## Link Click Handling
In general, applcations have their own way of handling link clicks. Such as opening on a new tab, etc. This can be initialised one time at the start of your application.
```
import Translate from '@pureartisans/simple-i18n-react';
Translate.setDefaultLinkHandler(function(link) { // link was taken from 'href' attribute
// my awesome way to handle the link click
myAwesomeUrlClickHandler.open(link);
});
```
Now that you have already setup a general link handler, perhaps you want to change the way a single link works compared to the rest of the links:
```
const languages = {
'en': {
'feedback.body': 'Please leave us some feedback.'
}
};
// my custom click handler
var myFeedbackClickHandler = function() {
// open feedback popup
};
// let's create a simple component, but override the default link handler just for this component
const HelpInfo = () => (
);
```
***NOTE*** In the above example, in order for link handling to be triggered when a user clicks on the link, we had to set `href` to something other than empty string or `#`. If `href` is not provided, is empty or set to `#`, the click handling is ignored.