react-globalize - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

examples/index.js

 var React = require('react');
 var Globalize = require('globalize');
-var LocalizedCurrencies = require('./modules/currency');
-var LocalizedDates = require('./modules/dates');
-var LocalizedMessages = require('./modules/messages');
-var LocalizedNumbers = require('./modules/numbers');
+var LocalizedCurrencies = require('./components/currency');
+var LocalizedDates = require('./components/dates');
+var LocalizedMessages = require('./components/messages');
+var LocalizedNumbers = require('./components/numbers');
 
@@ -8,0 +8,0 @@ var messages = {

examples/package.json

@@ -12,3 +12,3 @@
     "cldr-data": "~26.0.9",
-    "react": "~0.12.2",
+    "react": "~0.13.1",
     "globalize": "~1.0.0-alpha.18"
@@ -15,0 +15,0 @@ },

package.json

 {
   "name": "react-globalize",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Bringing the i18n functionality of Globalize, backed by CLDR, to React",
-  "main": "index.js",
+  "main": "dist/index.js",
+  "files": [
+    "dist/",
+    "examples/",
+    "LICENSE",
+    "README.md",
+    "src/"
+  ],
   "scripts": {
@@ -22,2 +29,5 @@ "test": "echo \"Error: no test specified\" && exit 1"
   "author": "Kris Borchers",
+  "contributors": [
+    "Rafael Xavier de Souza @rxaviers"
+  ],
   "homepage": "https://github.com/kborchers/react-globalize",
@@ -27,8 +37,14 @@ "license": "MIT",
   "bugs": "https://github.com/kborchers/react-globalize/issues",
-  "devDependencies": {
-    "browserify": "~9.0.3"
+  "dependencies": {
+    "globalize": ">= 1.0.0",
+    "react": ">= 0.13.0 < 1.0.0"
   },
   "peerDependencies": {
-    "react": "~0.12.2"
+    "globalize": ">= 1.0.0",
+    "react": ">= 0.13.0 < 1.0.0"
+  },
+  "devDependencies": {
+    "grunt": "^0.4.5",
+    "grunt-esperanto": "^0.4.0"
   }
 }

README.md

 # react-globalize
 
-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.
+[React](http://facebook.github.io/react/) components that provide internationalization features via [Globalize](https://github.com/jquery/globalize). With a little initialization, you get instantly internationalized values in your application.
 
 ## Install
-1. `npm install react-globalize`
+
+1. `npm install react-globalize --save`
 2. In your application just:
 	```JS
-	var ReactGlobalize = require('react-globalize');
-	var Globalize = require('globalize');
-	
+	var ReactGlobalize = require("react-globalize");
+	var Globalize = require("globalize");
+	var FormatCurrency = ReactGlobalize.FormatCurrency;
+
 	// 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)
+
+	Globalize.locale("en");
+
+	// Then, to use any ReactGlobalize component (with JSX)
 	React.render(
-	    <CurrencyComponent locale="en" currency="USD" value={150}/>
+	    <FormatCurrency currency="USD">{150}</FormatCurrency>
 	);
-	// Which would render <span>$150.00</span>
+	// Which would render for example:
+	// <span>$150.00</span> when using the `en` (English) locale, or
+	// <span>150,00 $</span> when using the `de` (German) locale, or
+	// <span>US$150,00</span> when using the `pt` (Portuguese) locale, or
+	// <span>US$ 150.00</span> when using the `zh` (Chinese) locale, or
+	// <span>US$ ١٥٠٫٠٠</span> when using the `ar` (Arabic) locale.
 	```
-	
-3. Further info about each mixin and its available props below
 
-## 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.
+3. Further info about each component is available below.
 
-### formatCurrency
+## Components
+
+These components 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 component has a set of props, both required and optional. The component then uses the values of those props to properly format the passed values. Below is a listing of each component, its props and a usage example.
+
+### FormatCurrency
+
+It allows to format a currency. Your code can be completely independent of the locale conventions for which currency symbol to use, whether or not there's a space between the currency symbol and the value, the side where the currency symbol must be placed, or even decimal digits used by particular currencies. Currencies can be displayed using symbols (the default), accounting form, 3-letter code, or plural messages. See [currencyFormatter][] docs in Globalize for more information.
+
+[currencyFormatter]: https://github.com/jquery/globalize/blob/master/doc/api/currency/currency-formatter.md
+
+#### Children
+
+The numeric value to be formatted. Required.
+
 #### Props
-- **locale** - required
- - A string value representing the CLDR indicator for the desired locale used in formatting the amount. Most apps will pull this value from the component's state or the state of one of its parent compenents.
+
 - **currency** - required
- - A string value representing the currency type (USD, EUR, etc)
-- **value** - required
- - The numeric value to be formatted
+ - A 3-letter string currency code as defined by ISO 4217 (e.g., USD, EUR, CNY, etc).
 - **options**
- - An optional set of options to further format the value. See the [numberFormatter](https://github.com/jquery/globalize/blob/master/doc/api/number/number-formatter.md) docs in Globalize for more info on specific options
+ - An optional set of options to further format the value. See the [currencyFormatter][] docs in Globalize for more info on specific options
+- **locale** - optional
+ - A string value representing the locale (as defined by BCP47) used to override the default locale (preferred) set by your application using `Globalize.locale(locale)` when formatting the amount.
 
-#### Usage via an example FormatCurrency component
-- Default format with USD in English
+#### Usage
 
-  `<FormatCurrency locale="en" currency="USD" value={150} />`
+Default format with USD.
 
-Result: this.state.formattedValue = $150.00
+```js
+<FormatCurrency currency="USD">{150}</FormatCurrency>
+// Which would render:
+// <span>$150.00</span> when using the `en` (English) locale, or
+// <span>US$150,00</span> when using the `pt` (Portuguese) locale.
+```
 
-- Accounting format with EUR in Portuguese
+Accounting format with EUR.
 
-  `<FormatCurrency locale="pt-BR" currency="EUR" value={-150} options={{ style: "accounting" }} />`
+```js
+<FormatCurrency currency="EUR" options={{style: "accounting"}}>
+	{-150}
+</FormatCurrency>
+// Which would render:
+// <span>(€150.00)</span> when using the `en` (English) locale, or
+// <span>(€150,00)</span> when using the `pt` (Portuguese) locale.
+```
 
-Result: this.state.formattedValue = (€150,00)
+### FormatDate
 
-### formatDate
+It allows to convert dates and times from their internal representations to textual form in a language-independent manner. Your code can conveniently control the length of the formatted date, time, datetime. See [dateFormatter][] docs in Globalize for more information.
+
+[dateFormatter]: https://github.com/jquery/globalize/blob/master/doc/api/date/date-formatter.md
+
+#### Children
+
+The date object to be formatted. Required.
+
 #### Props
-- **locale** - required
- - A string value representing the CLDR indicator for the desired locale used in formatting the date. Most apps will pull this value from the component's state or the state of one of its parent compenents.
+
 - **value** - required
  - The date object to be formatted
-- **pattern** - required
- - An string or object which defines how to format the date. See the [dateFormatter](https://github.com/jquery/globalize/blob/master/doc/api/date/date-formatter.md) docs in Globalize for more info on supported patterns
+- **options**
+ - An optional set of options which defines how to format the date. See the [dateFormatter][] docs in Globalize for more info on supported patterns
+- **locale** - optional
+ - A string value representing the locale (as defined by BCP47) used to override the default locale (preferred) set by your application using `Globalize.locale(locale)` when formatting the amount.
 
-#### Usage via an example FormatDate component
-- Simple string skeleton in English
+#### Usage
 
-  `<FormatDate locale="en" value={new Date()} pattern="GyMMMd" />`
+Simple string skeleton.
 
-Result: this.state.formattedValue = Feb 27, 2015 AD
+```js
+<FormatDate options={{skeleton: "GyMMMd"}}>
+	{new Date()}
+</FormatDate>
+// Which would render:
+// <span>Feb 27, 2015 AD</span> when using the `en` (English) locale, or
+// <span>27 de fev de 2015 d.C.</span> when using the `pt` (Portuguese) locale.
+```
 
-- Medium length date and time in Portuguese
+Medium length date and time.
 
-  `<FormatDate locale="pt-BR" value={new Date()} pattern={{ datetime: 'medium' }} />`
+```js
+<FormatDate options={{datetime: "medium"}}>
+	{new Date()}
+</FormatDate>
+// Which would render:
+// <span>Feb 27, 2015, 11:17:10 AM</span> when using the `en` (English) locale, or
+// <span>27 de fev de 2015 11:17:10</span> when using the `pt` (Portuguese) locale.
+```
 
-Result: this.state.formattedValue = 27 de fev de 2015 11:17:10
+### FormatMessage
 
-### formatMessage
+It allows for the creation of internationalized messages (as defined by the [ICU Message syntax][]), with optional arguments (variables/placeholders) allowing for simple replacement, gender and plural inflections. The arguments can occur in any order, which is necessary for translation into languages with different grammars. See [messageFormatter][] docs in Globalize for more information.
+
+[messageFormatter]: https://github.com/jquery/globalize/blob/master/doc/api/message/message-formatter.md
+[ICU Message syntax]: http://userguide.icu-project.org/formatparse/messages
+
+#### Children
+
+Required unless the `path` property is set. It's a string with the default message. Either this or the `path` property is required.
+
 #### Props
-- **locale** - required
- - A string value representing the CLDR indicator for the desired locale used in formatting the message. Most apps will pull this value from the component's state or the state of one of its parent compenents.
-- **path** - required
- - String or array path to traverse a set of messages store in JSON format
-- **variables**
+
+- **path** - required unless children is set
+ - String or array path to traverse a set of messages store in JSON format. Defaults to the message itself defined by the children.
+- **variables** - optional
  - An array (where variables are represented as indeces) or object (for named variables) which contains values for variable replacement within a message.
+- **elements** - optional
+ - An object (where element names are represented as keys, and its corresponding element as values) which contains elements replacement within a message.
+- **locale** - optional
+ - A string value representing the locale (as defined by BCP47) used to override the default locale (preferred) set by your application using `Globalize.locale(locale)` when formatting the amount.
 
-#### Usage via an example FormatMessage component
-Below message JSON used in these examples:
-  ```JS
-  {
-    en: {
-      salutations: {
-        hi: "Hi",
-        bye: "Bye"
-      },
-      variables: {
-        hello: "Hello, {0} {1} {2}",
-        hey: "Hey, {first} {middle} {last}"
-      }
-    },
-    "pt-BR": {
-      salutations: {
-        hi: "Oi",
-        bye: "Tchau"
-      },
-      variables: {
-        hello: "Olá, {0} {1} {2}",
-        hey: "Ei, {first} {middle} {last}"
-      }
-    }
-  }
-  ```
-- Simple salutation
+#### Usage
 
-Hi in English: `<FormatMessage locale="en" path="salutations/hi" />`
+Below translation message JSON used in these examples:
+```js
+{
+	"pt": {
+		"Hi": "Oi",
+		"Hi, {0} {1} {2}": "Olá, {0} {1} {2}",
+		"Hello, {first} {middle} {last}": "Ei, {first} {middle} {last}"
+	}
+}
+```
 
-Result: this.state.formattedValue = Hi
+Simple salutation.
 
-Hi in Portuguese: `<FormatMessage locale="pt-BR" path="salutations/hi" />`
+```js
+<FormatMessage>Hi</FormatMessage>
+// Which would render:
+// <span>Hi</span> when using the default message, in this case `en` (English).
+// <span>Oi</span> when using the `pt` (Portuguese) locale and its translation messages.
+```
 
-Result: this.state.formattedValue = Oi
+Variable Replacement.
 
-- Variable Replacement
+```js
+// Using Array.
+<FormatMessage variables={["Wolfgang", "Amadeus", "Mozart"]}>
+	{"Hi, {0} {1} {2}"}
+</FormatMessage>
+// Which would render:
+// <span>Hello, Wolfgang Amadeus Mozart</span> when using the default message, in this case `en` (English).
+// <span>Hello, Wolfgang Amadeus Mozart</span> when using the `en` (English) locale and its translation messages.
 
-Array in English: `<FormatMessage locale="en" path="variables/hello" variables={["Wolfgang", "Amadeus", "Mozart"]} />`
+// Using Object.
+<FormatMessage variables={{first:"Wolfgang", middle:"Amadeus", last:"Mozart"}}>
+  {"Hey, {first} {middle} {last}"}
+</FormatMessage>
+// Which would render:
+// <span>Hey, Wolfgang Amadeus Mozart</span> when using the default message, in this case `en` (English).
+// <span>Ei, Wolfgang Amadeus Mozart</span> when using the `pt` (Portuguese) locale and its translation messages.
+```
 
-Result: this.state.formattedValue = Hello, Wolfgang Amadeus Mozart
+Element Replacement.
 
-Object in Portuguese: `<FormatMessage locale="pt-BR" path="variables/hey" variables={{first:"Wolfgang", middle:"Amadeus", last:"Mozart"}} />`
+```js
+<FormatMessage
+  elements={{
+    reactGlobalizeLink: <a href='https://github.com/kborchers/react-globalize'></a>
+  }}
+>
+  For more information, see [reactGlobalize]React Globalize[/reactGlobalize]
+</FormatMessage>
+// Which would render:
+// <span>
+//   For more information, see 
+//   <a href="https://github.com/kborchers/react-globalize">React Globalize</a>
+// </span>
+// when using the default message, in this case `en` (English).
+```
 
-Result: this.state.formattedValue = Ei, Wolfgang Amadeus Mozart
+See [messageFormatter][] docs in Globalize for more message examples (e.g., pluralization or gender selection).
 
-### formatNumber
+### FormatNumber
+
+It allows to convert numbers into textual representations. Your code can be completely independent of the locale conventions for decimal points, thousands-separators, or even the particular decimal digits used, or whether the number format is even decimal. Though, it can still conveniently control various aspects of the formatted number like the minimum and maximum fraction digits, integer padding, rounding method, display as percentage, and others. See [numberFormatter][] docs in Globalize for more information.
+
+[numberFormatter]: https://github.com/jquery/globalize/blob/master/doc/api/number/number-formatter.md
+
+#### Children
+
+The number to be formatted. Required.
+
 #### Props
-- **locale** - required
- - A string value representing the CLDR indicator for the desired locale used in formatting the date. Most apps will pull this value from the component's state or the state of one of its parent compenents.
+
 - **value** - required
  - The number to be formatted
 - **options**
- - An optional set of options to further format the value. See the [numberFormatter](https://github.com/jquery/globalize/blob/master/doc/api/number/number-formatter.md) docs in Globalize for more info on specific options
+ - An optional set of options to further format the value. See the [numberFormatter][] docs in Globalize for more info on specific options
+- **locale** - optional
+ - A string value representing the locale (as defined by BCP47) used to override the default locale (preferred) set by your application using `Globalize.locale(locale)` when formatting the amount.
 
-#### Usage via an example FormatNumber component
-- Default format pi in English
+#### Usage
 
-  `<FormatNumber locale="en" value={Math.PI} />`
+Default format pi.
 
-Result: this.state.formattedValue = 3.142
+```js
+<FormatNumber locale="en">{Math.PI}</FormatNumber>
+// Which would render:
+// <span>3.142</span> when using the `en` (English) locale, or
+// <span>3,142</span> when using the `pt` (Portuguese) locale.
+```
 
-- Show at least 2 decimal places in Portuguese
+Show at least 2 decimal places.
 
-  `<FormatNumber locale="pt-BR" value={10000} options={{ minimumFractionDigits: 2 }} />`
+```js
+<FormatNumber options={{minimumFractionDigits: 2}}>
+	{10000}
+</FormatNumber>
+// Which would render:
+// <span>10,000.00</span> when using the `en` (English) locale, or
+// <span>10.000,00</span> when using the `pt` (Portuguese) locale.
+```
 
-Result: this.state.formattedValue = 10.000,00
+## License
 
-## 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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

Improved metrics

Total package byte prevSize

2843819

increased by11536.87%

Number of package files

47

increased by261.54%

Lines of code

80040

increased by22834.1%

Number of lines in readme file

249

increased by52.76%

Worsened metrics

Dependency count

4

increased by300%

Dev dependency count

2

increased by100%

Number of low supply chain risk alerts

177

increased by17600%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedglobalize@>= 1.0.0

• + Addedreact@>= 0.13.0 < 1.0.0

• + Addedasap@2.0.6(transitive)

• + Addedcldrjs@0.5.5(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedfbjs@0.6.1(transitive)

• + Addedglobalize@1.7.0(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedreact@0.14.10(transitive)

• + Addedua-parser-js@0.7.39(transitive)

• + Addedwhatwg-fetch@0.9.0(transitive)

• - Removedreact@0.12.2(transitive)