You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
3
+
[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.
4
4
5
5
## Install
6
-
1.`npm install react-globalize`
6
+
7
+
1.`npm install react-globalize --save`
7
8
2. In your application just:
8
9
```JS
9
-
var ReactGlobalize = require('react-globalize');
10
-
var Globalize = require('globalize');
11
-
10
+
var ReactGlobalize = require("react-globalize");
11
+
var Globalize = require("globalize");
12
+
var FormatCurrency = ReactGlobalize.FormatCurrency;
13
+
12
14
// Initialize Globalize and load your CLDR data
13
15
// See https://github.com/jquery/globalize for details on Globalize usage
14
-
15
-
// In your component, this example just places the formatted value in a span
16
-
var CurrencyComponent = React.createClass({
17
-
mixins: [ReactGlobalize.formatCurrency],
18
-
...
19
-
render: function() {
20
-
return (
21
-
<span>{this.state.formattedValue}</span>
22
-
);
23
-
}
24
-
});
25
-
26
-
// Then to use your currency component (with JSX)
16
+
17
+
Globalize.locale("en");
18
+
19
+
// Then, to use any ReactGlobalize component (with JSX)
// <span>$150.00</span> when using the `en` (English) locale, or
25
+
// <span>150,00 $</span> when using the `de` (German) locale, or
26
+
// <span>US$150,00</span> when using the `pt` (Portuguese) locale, or
27
+
// <span>US$ 150.00</span> when using the `zh` (Chinese) locale, or
28
+
// <span>US$ ١٥٠٫٠٠</span> when using the `ar` (Arabic) locale.
31
29
```
32
-
33
-
3. Further info about each mixin and its available props below
34
30
35
-
## Mixins
36
-
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.
31
+
3. Further info about each component is available below.
32
+
33
+
## Components
34
+
35
+
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.
36
+
37
+
### FormatCurrency
38
+
39
+
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.
- 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.
44
+
42
45
-**currency** - required
43
-
- A string value representing the currency type (USD, EUR, etc)
46
+
- A 3-letter string currency code as defined by ISO 4217 (e.g., USD, EUR, CNY, etc).
44
47
-**value** - required
45
48
- The numeric value to be formatted
46
49
-**options**
47
-
- 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
50
+
- An optional set of options to further format the value. See the [currencyFormatter][] docs in Globalize for more info on specific options
51
+
-**locale** - optional
52
+
- 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.
53
+
54
+
#### Usage
48
55
49
-
#### Usage via an example FormatCurrency component
Result: `<span>(€150,00)</span>` when using the `pt` (Portuguese) locale.
67
+
68
+
### FormatDate
69
+
70
+
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.
- 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.
75
+
66
76
-**value** - required
67
77
- The date object to be formatted
68
-
-**pattern** - required
69
-
- 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
78
+
-**options**
79
+
- An optional set of options which defines how to format the date. See the [dateFormatter][] docs in Globalize for more info on supported patterns
80
+
-**locale** - optional
81
+
- 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.
Result: `<span>27 de fev de 2015 11:17:10</span>` when using the `pt` (Portuguese) locale.
81
96
82
-
Result: this.state.formattedValue = 27 de fev de 2015 11:17:10
97
+
### FormatMessage
98
+
99
+
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.
- 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.
105
+
88
106
-**path** - required
89
107
- String or array path to traverse a set of messages store in JSON format
90
-
-**variables**
108
+
-**variables** - optional
91
109
- An array (where variables are represented as indeces) or object (for named variables) which contains values for variable replacement within a message.
110
+
-**locale** - optional
111
+
- 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.
112
+
113
+
#### Usage
92
114
93
-
#### Usage via an example FormatMessage component
94
115
Below message JSON used in these examples:
95
116
```JS
96
117
{
@@ -104,7 +125,7 @@ Below message JSON used in these examples:
104
125
hey:"Hey, {first} {middle} {last}"
105
126
}
106
127
},
107
-
"pt-BR": {
128
+
"pt": {
108
129
salutations: {
109
130
hi:"Oi",
110
131
bye:"Tchau"
@@ -118,45 +139,53 @@ Below message JSON used in these examples:
118
139
```
119
140
- Simple salutation
120
141
121
-
Hi in English: `<FormatMessage locale="en" path="salutations/hi" />`
142
+
Hi: `<FormatMessage path="salutations/hi" />`
122
143
123
-
Result: this.state.formattedValue = Hi
144
+
Result:
124
145
125
-
Hi in Portuguese: `<FormatMessage locale="pt-BR" path="salutations/hi" />`
146
+
`<span>Hi</span>` when using the `en` (English) locale, or
126
147
127
-
Result: this.state.formattedValue = Oi
148
+
`<span>Oi</span>` when using the `pt` (Portuguese) locale.
128
149
129
150
- Variable Replacement
130
151
131
-
Array in English: `<FormatMessage locale="en" path="variables/hello" variables={["Wolfgang", "Amadeus", "Mozart"]} />`
Result: `<span>Hello, Wolfgang Amadeus Mozart</span>` when using the `en` (English) locale.
155
+
156
+
Object in Portuguese: `<FormatMessage path="variables/hey" variables={{first:"Wolfgang", middle:"Amadeus", last:"Mozart"}} />`
157
+
158
+
Result: `<span>Ei, Wolfgang Amadeus Mozart</span>` when using the `pt` (Portuguese) locale.
132
159
133
-
Result: this.state.formattedValue = Hello, Wolfgang Amadeus Mozart
160
+
### FormatNumber
134
161
135
-
Object in Portuguese: `<FormatMessage locale="pt-BR" path="variables/hey" variables={{first:"Wolfgang", middle:"Amadeus", last:"Mozart"}} />`
162
+
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.
136
163
137
-
Result: this.state.formattedValue = Ei, Wolfgang Amadeus Mozart
- 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.
167
+
143
168
-**value** - required
144
169
- The number to be formatted
145
170
-**options**
146
-
- 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
171
+
- An optional set of options to further format the value. See the [numberFormatter][] docs in Globalize for more info on specific options
172
+
-**locale** - optional
173
+
- 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.
174
+
175
+
#### Usage
147
176
148
-
#### Usage via an example FormatNumber component
149
177
- Default format pi in English
150
178
151
179
`<FormatNumber locale="en" value={Math.PI} />`
152
180
153
-
Result: this.state.formattedValue = 3.142
181
+
Result: `<span>3.142</span>` when using the `en` (English) locale.
0 commit comments