https://github.com/oklas/component-intl-welcome
Example of component library according to Component Approach to Internationalization
https://github.com/oklas/component-intl-welcome
component i18n internationalization intl join loader locale localization merge plugin
Last synced: about 1 year ago
JSON representation
Example of component library according to Component Approach to Internationalization
- Host: GitHub
- URL: https://github.com/oklas/component-intl-welcome
- Owner: oklas
- License: mit
- Created: 2017-03-25T11:37:09.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-31T21:58:18.000Z (about 9 years ago)
- Last Synced: 2025-03-31T04:41:13.744Z (about 1 year ago)
- Topics: component, i18n, internationalization, intl, join, loader, locale, localization, merge, plugin
- Language: JavaScript
- Size: 24.4 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Demonstration component 'Welcome' with locales
This is exampe library with support of internationalization according to
**[component approach](https://github.com/oklas/component-intl)**
This library exports a demonstration component **'Welcome'** which uses
[react-intl](https://github.com/yahoo/react-intl) internationalization
library. The component displays a simple form and displays a localized
sentence in the selected language. The sentence is reactively changing
in response to a change of the data in the form.
This demonstration component currently support `en`, `de`, `ru`, `zh` locales.
The localization data is in directory [./locales](./locales) in yaml
format according to component approach
To integrate localization data to application locale assets configure
the [webpack](https://webpack.js.org/) internationalization plugin
[intl-webpack-plugin](https://github.com/oklas/intl-webpack-plugin)
like this:
``` javascript
var IntlPlugin = require("intl-webpack-plugin");
module: {
rules: [
{ test: /\.(intl)$/i,
use: [
IntlPlugin.loader(),
'yaml-loader'
]
}
]
}
plugins: [
new IntlPlugin({})
]
```
And require internationalization entry point module somewhere in application:
``` javascript
import {} from 'component-intl-welcome/locales'
```
Now import component and put it on the page like this:
``` javascript
import React from 'react'
import Welcome from 'component-intl-welcome'
import {} from 'component-intl-welcome/locales'
const App = (props) => (
The "Welcome" component
)
```
To see example how to integrate this library component with locales into
application and how it works see
* the running [demonstration application](https://oklas.github.io/component-intl-example/)
or its source code:
* [component-intl-example](https://github.com/oklas/component-intl-example/)