react-globalize - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

examples/modules/currency.js

 var ReactGlobalize = require('../react-globalize');
 var React = require('react');
-var Globalize = require('globalize');
-var FormatCurrency = ReactGlobalize.FormatCurrency;
 
+var FormatCurrency = React.createClass({
+    mixins: [ReactGlobalize.formatCurrency],
+    render: function() {
+        return (
+            <span>{this.state.formattedValue}</span>
+        );
+    }
+});
+
 module.exports = React.createClass({
@@ -7,0 +14,0 @@ getInitialState: function() {

examples/modules/dates.js

 var ReactGlobalize = require('../react-globalize');
 var React = require('react');
-var Globalize = require('globalize');
-var FormatDate = ReactGlobalize.FormatDate;
 
+var FormatDate = React.createClass({
+    mixins: [ReactGlobalize.formatDate],
+    render: function() {
+        return (
+            <span>{this.state.formattedValue}</span>
+        );
+    }
+});
+
 module.exports = React.createClass({
@@ -7,0 +14,0 @@ getInitialState: function() {

examples/modules/messages.js

 var ReactGlobalize = require('../react-globalize');
 var React = require('react');
 var Globalize = require('globalize');
-var FormatMessage = ReactGlobalize.FormatMessage;
 
+var FormatMessage = React.createClass({
+    mixins: [ReactGlobalize.formatMessage],
+    render: function() {
+        return (
+            <span>{this.state.formattedValue}</span>
+        );
+    }
+});
+
 module.exports = React.createClass({
@@ -7,0 +15,0 @@ getInitialState: function() {

examples/modules/numbers.js

 var ReactGlobalize = require('../react-globalize');
 var React = require('react');
-var Globalize = require('globalize');
-var FormatNumber = ReactGlobalize.FormatNumber;
 
+var FormatNumber = React.createClass({
+    mixins: [ReactGlobalize.formatNumber],
+    render: function() {
+        return (
+            <span>{this.state.formattedValue}</span>
+        );
+    }
+});
+
 module.exports = React.createClass({
@@ -7,0 +14,0 @@ getInitialState: function() {

examples/package.json

@@ -13,3 +13,3 @@
     "react": "~0.12.2",
-    "globalize":"~1.0.0-alpha.17"
+    "globalize": "~1.0.0-alpha.18"
   },
@@ -16,0 +16,0 @@ "scripts": {

index.js

@@ -1,32 +0,30 @@
-var React = require('react');
 var Globalize = require('globalize');
+var mixins = {};
 
-var globalizations = [
-    {formatCurrency: ["value","currency","options"]},
-    {formatDate: ["value","pattern"]},
-    {formatMessage: ["path","variables"]},
-    {formatNumber: ["value","options"]}
-];
+Object.getOwnPropertyNames(Globalize).forEach(function(fn) {
+    if (fn.indexOf("format") === 0) {
+        var fnString = Globalize[fn].toString();
+        var argString = fnString.substr(fnString.indexOf('(')+1, fnString.indexOf(')')-(fnString.indexOf('(')+1)).trim();
+        var argArray = argString.split(', ');
 
-globalizations.forEach(function(globalization) {
-    var fn = Object.keys(globalization)[0],
-        params = globalization[fn];
-
-    (function(currentFn, currentParams) {
-        module.exports[currentFn.charAt(0).toUpperCase() + currentFn.slice(1)] = React.createClass({
-            currentParams: currentParams,
-            render: function() {
-                var that = this;
-                var propParams = this.currentParams.map(function(element) {
-                        return that.props[element];
+        (function(currentFn, currentArgs) {
+            var formatter = function(nextProps) {
+                var componentProps = nextProps || this.props;
+                var propArgs = currentArgs.map(function(element) {
+                        return componentProps[element.replace(/(\s\/\*|\*\/)/,'').trim()];
                     });
-                // set locale
-                Globalize.locale( this.props.locale );
 
-                return (
-                    React.createElement("span", null, Globalize[currentFn].apply(Globalize, propParams))
-                );
-            }
-        });
-    })(fn, params);
+                Globalize.locale( componentProps["locale"] );
+                this.setState({
+                    formattedValue: Globalize[currentFn].apply(Globalize, propArgs)
+                });
+            };
+
+            mixins[currentFn] = {
+                componentWillMount: formatter,
+                componentWillReceiveProps: formatter
+            };
+        })(fn, argArray);
+    }
 });
+module.exports = mixins;

package.json

 {
   "name": "react-globalize",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Bringing the i18n functionality of Globalize, backed by CLDR, to React",
@@ -13,2 +13,8 @@ "main": "index.js",
     "i18n",
+    "internationalization",
+    "translation",
+    "date",
+    "currency",
+    "number",
+    "format",
     "cldr"
@@ -19,2 +25,4 @@ ],
   "license": "MIT",
+  "repository": "kborchers/react-globalize",
+  "bugs": "https://github.com/kborchers/react-globalize/issues",
   "devDependencies": {
@@ -24,5 +32,4 @@ "browserify": "~9.0.3"
   "peerDependencies": {
-    "globalize": "~1.0.0-alpha.17",
     "react": "~0.12.2"
   }
 }

README.md

 # react-globalize
 
-Easy to use [React](http://facebook.github.io/react/) components that provide internationalization features out of the box via [Globalize](https://github.com/jquery/globalize). With a quick update of a value, variable or locale, you get instant UI updates.
+Easy to use [React](http://facebook.github.io/react/) mixins that provide internationalization features to any React component via [Globalize](https://github.com/jquery/globalize). With a little initialization, you get instantly internationalized values in your components.
 
@@ -8,9 +8,33 @@ ## Install
 2. In your application just:
-	`var FormatCurrency = require('react-globalize').FormatCurrency;`
-3. Then follow the usage instructions for each component below
+	```JS
+	var ReactGlobalize = require('react-globalize');
+	var Globalize = require('globalize');
+	
+	// Initialize Globalize and load your CLDR data
+	// See https://github.com/jquery/globalize for details on Globalize usage
+	
+	// In your component, this example just places the formatted value in a span
+	var CurrencyComponent = React.createClass({
+	    mixins: [ReactGlobalize.formatCurrency],
+	    ...
+	    render: function() {
+	        return (
+                    <span>{this.state.formattedValue}</span>
+                );
+            }
+	});
+	
+	// Then to use your currency component (with JSX)
+	React.render(
+	    <CurrencyComponent locale="en" currency="USD" value={150}/>
+	);
+	// Which would render <span>$150.00</span>
+	```
+	
+3. Further info about each mixin and its available props below
 
-## Components
-Components are the heart of React and the whole point of react-globalize. These components provide simple, easily updatable elements in your page to display things like currency, dates, numbers and messages, formatted or translated to the current locale set by your application.
+## Mixins
+These mixins provide a simple way to display things like currency, dates, numbers and messages, formatted or translated to the current locale set by your application. Each mixin has a set of props, both required and optional, to be included in your component. The mixin then uses the values of those props, to add a `formattedValue` to your component's state. Below is a listing of each mixin, its props and a usage example.
 
-### FormatCurrency
+### formatCurrency
 #### Props
@@ -26,3 +50,3 @@ - **locale** - required
 
-#### Usage
+#### Usage via an example FormatCurrency component
 - Default format with USD in English
@@ -32,3 +56,3 @@
 
-Result: $150.00
+Result: this.state.formattedValue = $150.00
 
@@ -39,5 +63,5 @@ - Accounting format with EUR in Portuguese
 
-Result: (€150,00)
+Result: this.state.formattedValue = (€150,00)
 
-### FormatDate
+### formatDate
 #### Props
@@ -51,3 +75,3 @@ - **locale** - required
 
-#### Usage
+#### Usage via an example FormatDate component
 - Simple string skeleton in English
@@ -57,3 +81,3 @@
 
-Result: Feb 27, 2015 AD
+Result: this.state.formattedValue = Feb 27, 2015 AD
 
@@ -64,5 +88,5 @@ - Medium length date and time in Portuguese
 
-Result: 27 de fev de 2015 11:17:10
+Result: this.state.formattedValue = 27 de fev de 2015 11:17:10
 
-### FormatMessage
+### formatMessage
 #### Props
@@ -76,3 +100,3 @@ - **locale** - required
 
-#### Usage
+#### Usage via an example FormatMessage component
 Below message JSON used in these examples:
@@ -107,7 +131,7 @@ ```JS
 
-Result: Hi
+Result: this.state.formattedValue = Hi
 
 Hi in Portuguese: `<FormatMessage locale="pt-BR" path="salutations/hi" />`
 
-Result: Oi
+Result: this.state.formattedValue = Oi
 
@@ -118,9 +142,9 @@ - Variable Replacement
 
-Result: Hello, Wolfgang Amadeus Mozart
+Result: this.state.formattedValue = Hello, Wolfgang Amadeus Mozart
 
 Object in Portuguese: `<FormatMessage locale="pt-BR" path="variables/hey" variables={{first:"Wolfgang", middle:"Amadeus", last:"Mozart"}} />`
 
-Result: Ei, Wolfgang Amadeus Mozart
+Result: this.state.formattedValue = Ei, Wolfgang Amadeus Mozart
 
-### FormatNumber
+### formatNumber
 #### Props
@@ -134,3 +158,3 @@ - **locale** - required
 
-#### Usage
+#### Usage via an example FormatNumber component
 - Default format pi in English
@@ -140,3 +164,3 @@
 
-Result: 3.142
+Result: this.state.formattedValue = 3.142
 
@@ -147,5 +171,5 @@ - Show at least 2 decimal places in Portuguese
 
-Result: 10.000,00
+Result: this.state.formattedValue = 10.000,00
 
 ## License
 This project is distributed under the [MIT license](https://www.tldrlegal.com/l/mit).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24438

increased by8.78%

Dependency count

1

decreased by-50%

Lines of code

349

increased by7.06%

Number of lines in readme file

163

increased by17.27%

No dependency changes