Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/opuscapita/react-i18n
OpusCapita React i18n Extension
https://github.com/opuscapita/react-i18n
andariel bnp i18n javascript react
Last synced: about 1 month ago
JSON representation
OpusCapita React i18n Extension
- Host: GitHub
- URL: https://github.com/opuscapita/react-i18n
- Owner: OpusCapita
- License: apache-2.0
- Created: 2016-12-07T09:50:09.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-03-25T22:26:47.000Z (10 months ago)
- Last Synced: 2024-11-22T12:07:06.530Z (about 2 months ago)
- Topics: andariel, bnp, i18n, javascript, react
- Language: JavaScript
- Homepage:
- Size: 988 KB
- Stars: 0
- Watchers: 59
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[![CircleCI Status](https://circleci.com/gh/OpusCapita/react-i18n/tree/master.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/OpusCapita/react-i18n)
[![Coverage Status](https://coveralls.io/repos/github/OpusCapita/react-i18n/badge.svg)](https://coveralls.io/github/OpusCapita/react-i18n)
[![npm version](https://img.shields.io/npm/v/@opuscapita/react-i18n.svg)](https://npmjs.org/package/@opuscapita/react-i18n)
[![Dependency Status](https://img.shields.io/david/OpusCapita/react-i18n.svg)](https://david-dm.org/OpusCapita/react-i18n)
[![NPM Downloads](https://img.shields.io/npm/dm/@opuscapita/react-i18n.svg)](https://npmjs.org/package/@opuscapita/react-i18n)
![badge-license](https://img.shields.io/github/license/OpusCapita/react-i18n.svg)# OpusCapita React i18n
[i18n module](https://github.com/OpusCapita/i18n) extension for React applications that provides several components (tags) for rendering i18n messages.
## Assumptions
Everything is stored in _i18n_ (I18nManager instance) object in scope of React context.
## Usage
### App
React application should initialize _i18n_ object and propagate it for child components.
```javascript
/**
* App
*/
class App extends React.Component {
static propTypes = {
locale: React.PropTypes.string.isRequired
};static childContextTypes = {
i18n: React.PropTypes.object.isRequired
};getChildContext() {
return {
i18n: new I18nManager(this.props.locale)
};
}render() {
return (
);
}
}export default function(element, props) {
return React.render(, element);
};
```### Component
Each component may register own messages in global _i18n_ using _register_ method of I18nManager.
```javascript
/**
* Root element of custom component.
*/
class MyComponent extends React.Component {
static contextTypes = {
i18n: React.PropTypes.object.isRequired
};static childContextTypes = {
i18n: React.PropTypes.object.isRequired
};getChildContext() {
const translations = [{
locales : ['en-US'],
messages: {
logo: {
title: 'Title',
text: 'Text'
}
}
}];return {
i18n: this.context.i18n.register('MyComponent', translations)
};
}```
## Development
### Run code linting
```bash
npm run lint
```### Run tests
```bash
npm test
```### Start demo
```bash
npm start
```