react-intl-universal
Advanced tools
Comparing version 1.0.6 to 1.0.7
{ | ||
"name": "react-intl-universal", | ||
"version": "1.0.6", | ||
"version": "1.0.7", | ||
"description": "Internationalize React apps. Not only for React.Component but also for Vanilla JS.", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
# react-intl-universal | ||
## You May Not Need yahoo/react-intl | ||
## Features | ||
- Can be used not only in React.Component but also in Vanilla JS. | ||
- Simple. Only three main API and one optional helper. | ||
- Display numbers, currency, dates and times for different locales. | ||
- Pluralize labels in strings. | ||
- Support variables in message. | ||
- Support HTML in message. | ||
- Automatically load [Common Locale Data Repository (CLDR)](http://cldr.unicode.org/) locale data on demand. It's used for displaying numbers, currency, dates and times accordingly. | ||
- Support for 150+ languages. | ||
- Runs in the browser and Node.js. | ||
- Message format is strictly implemented by [ICU standards](http://userguide.icu-project.org/formatparse/messages). | ||
For many apps, we don't need the feature provided by [react-intl](https://github.com/yahoo/react-intl) which is able to change locale data dynamically without reloading page. However, if you don't need this feature, just use [react-intl-universal](https://www.npmjs.com/package/react-intl-universal). It can be used not only in React.Component but also in Vanilla JS. | ||
## Live Demo | ||
[React Intl Universal Demo](http://g.alicdn.com/alishu/common/0.0.87/intl-example/index.html) | ||
## Why Another Internationalization Solution for React? | ||
@@ -30,3 +40,3 @@ In case of internationalizing React apps, [react-intl](https://github.com/yahoo/react-intl) is one of most popular package in industry. [react-intl](https://github.com/yahoo/react-intl) decorate your React.Component with wrapped component which is injected internationalized message dynamically so that the locale data is able to be loaded dynamically without reloading page. However, this approach introduces two major issues. | ||
getMyInstance() { | ||
console.log('getMyInstance', this.refs.my); | ||
console.log('getMyInstance', this.refs.my); | ||
} | ||
@@ -45,32 +55,10 @@ } | ||
getMyInstance() { | ||
console.log('getMyInstance', this.refs.my.getWrappedInstance()); | ||
console.log('getMyInstance', this.refs.my.getWrappedInstance()); | ||
} | ||
} | ||
``` | ||
Furthermore, your React.Component's properties is not inherited in subclass since component is injected by [react-intl](https://github.com/yahoo/react-intl). | ||
Furthermore, your React.Component's properties is not inherited in subclass since component is injected by [react-intl](https://github.com/yahoo/react-intl). | ||
That's the reason why we create [react-intl-universal](https://www.npmjs.com/package/react-intl-universal). | ||
## react-intl-universal Features | ||
- Can be used in Vanilla JS, not just in React.Component. | ||
- Display numbers, currency, dates and times for different locales. | ||
- Pluralize labels in strings. | ||
- Support variables in message. | ||
- Support HTML in message. | ||
- Automatically load [Common Locale Data Repository (CLDR)](http://cldr.unicode.org/) locale data on demand. It's used for displaying numbers, currency, dates and times. | ||
- Support for 150+ languages. | ||
- Runs in the browser and Node.js. | ||
- Message format is strictly implemented by [ICU standards](http://userguide.icu-project.org/formatparse/messages). | ||
## Live Demo | ||
[React Intl Universal Demo](http://g.alicdn.com/alishu/common/0.0.87/intl-example/index.html) | ||
## Running Examples Locally | ||
``` | ||
git clone git@github.com:alibaba/react-intl-universal.git | ||
cd react-intl-universal/examples | ||
npm install | ||
npm start | ||
``` | ||
## Get Started | ||
@@ -91,2 +79,3 @@ | ||
// locale data | ||
const locales = { | ||
@@ -229,3 +218,3 @@ "en-US": require('./locales/en-US.js'), | ||
### Helper | ||
`react-intl-universal` provides a utility helping developer determine the user's current locale. As the running examples, when user select a new locale, it redirect user new location like `http://localhost:3000?lang=en-US`. Then, we can use `intl.determineLocale` to get the locale from URL. It can also support determine user's locale via cookie and browser default language. Refer to the APIs section for more detail. | ||
[react-intl-universal](https://www.npmjs.com/package/react-intl-universal) provides a utility helping developer determine the user's current locale. As the running examples, when user select a new locale, it redirect user new location like `http://localhost:3000?lang=en-US`. Then, we can use `intl.determineLocale` to get the locale from URL. It can also support determine user's locale via cookie and browser default language. Refer to the APIs section for more detail. | ||
@@ -270,8 +259,9 @@ ## APIs | ||
## Code Test Coverage Summary | ||
## Running Examples Locally | ||
``` | ||
Statements : 84.75% ( 50/59 ) | ||
Branches : 81.58% ( 31/38 ) | ||
Functions : 90.91% ( 10/11 ) | ||
Lines : 84.75% ( 50/59 ) | ||
git clone git@github.com:alibaba/react-intl-universal.git | ||
cd react-intl-universal/examples | ||
npm install | ||
npm start | ||
``` | ||
@@ -281,3 +271,3 @@ | ||
Before using`react-intl-universal`, you need to include scripts below to support IE. | ||
Before using [react-intl-universal](https://www.npmjs.com/package/react-intl-universal), you need to include scripts below to support IE. | ||
``` | ||
@@ -292,3 +282,12 @@ <!--[if lt IE 9]> | ||
## Code Test Coverage Summary | ||
``` | ||
Statements : 84.75% ( 50/59 ) | ||
Branches : 81.58% ( 31/38 ) | ||
Functions : 90.91% ( 10/11 ) | ||
Lines : 84.75% ( 50/59 ) | ||
``` | ||
## License | ||
This software is free to use under the BSD license. |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
22568
287