Components
- I18NProvider
- ConnectI18NProvider
- I18N
- FormatText
- PluralFormat
- DateTimeFormat
How to use
<I18NProvider i18n={{key:"value"}} timeZone="Asia/kolkatta">
<YourApp>
</YourApp>
</I18NProvider>
<ConnectI18NProvider i18n={(state)=>{return state.i18nObj }} timeZone={(state)=>state.user.timeZone}dateTimeFormatMessages={()=>dateTimeFormatMessages}
onChange=((accept,reject)=>{call accept or reject})>
<YourApp>
</YourApp>
</ConnectI18NProvider>
<AppProvider i18n={(state)=>{return state.i18nObj }} timeZone={(state)=>state.user.timeZone}
user={}
permission={}
license={}
dateTimeFormatMessages={()=>dateTimeFormatMessages}
onChange=((accept,reject)=>{call accept or reject})>
<YourApp>
</YourApp>
</AppProvider>
<FormatText i18NKey="" values={[] | ""}/>
<PluralFormat one="i18n key for singluar" many="i18n key for plural" zero="i18n key for zero" value={1}/>
Formats
Mask | Description | Example |
---|---|---|
yyyy |
4-digits year | 1984 |
yy |
2-digits year | 84 |
MMMM |
Month name | January |
MMM |
Short month name | Jan |
mmmm |
Numeric month | 1 |
mmm |
2-digits month | 01 |
dddd |
Numeric day | 1 |
dd |
2-digits day | 01 |
DDDD |
Day of the week | Tuesday |
DDD |
Short day of the week | Tue |
A |
Day period |
AM , PM
|
HHHH |
24-hours Numeric hour | 1 |
HH |
24-hours 2-digits hour | 01 |
hhhh |
12-hours Numeric hour | 1 |
hh |
12-hours 2-digits hour | 01 |
MM |
Numeric minute | 1 |
mm |
2-digits minute | 01 |
ssss |
Numeric second | 1 |
ss |
2-digits second | 01 |
Default
format dd MMM yyyy hh:mm A
;
Display Date Using Component
<DateTimeFormat format="dd MMMMM"
dateTime={apiTimeFormat}
/>
output => 01 January
Display Date by string
getDateTimeFormat({dateTime : apiTimeFormat, format : "dd MMMMM" });
output => 01 January
Display Date - Custom Formatting
<DateTimeFormat dateTime={apiTimeFormat}
customFormat={(dateDetails,translator,dateConverter)=>{
if(dateDetails.isToday){
return translator('Today');
}
else if(dateDetails.isTomorrow){
return translator('Tomorrow');
}
return dateConverter('dd MMMM yyyy');
}}
/>
possible outputs => `Today` , `Tomorrow`, `01 January 1984`
Display Diff Date using component
<DateTimeFormat type="diff"
dateTime={apiTimeFormat}
/>
output => 10 minutes ago
Display Diff Date using string
getDateTimeFormat({ type : "diff", dateTime : apiTimeFormat , customFormat });
output => 10 minutes ago
Display Diff Date - Custom Formatting
<DateTimeFormat type="diff"
dateTime={apiTimeFormat}
customFormat={(dateDetails,translator)=>{
if( days > 1){
return 'one day ago'
}
return 'many days ago'
}}
/>
output => 'one day ago'
Some scenario
More general component
var Greetings = ()=>{
return <span>Hello,{this.props.name}</span>
}
<Greetings name="vimal"/>
Hello - hard coded data
name - dynamic data mostly no need to I18N. In case any dynamic data going to pass generic component. use i18nUtils.getI18NValue function
I18N Implementation
var Greetings = ()=>{
return <span><FormatText key="helloI18nKey"/>,{this.props.name}</span>
}
<Greetings name="vimal"/>
<Greetings name={i18nUtils.getI18NValue("world")}/>
textarea placeholder display i18n value
var Textarea=()=>{
return <textarea placeHolder={this.props.placeHolder} value={this.props.value}></textarea>
}
You can mention particular props going to accept i18n key. so convert using I18N HOC
Textarea = HOCI18N(["placeHolder"])(Textarea)
<Textarea placeHolder="i18n.please.enter.desc.key"/>
You can use utils function
<Textarea placeHolder={i18nUtils.getI18NValue("i18n.please.enter.desc.key")}/>
i18n json build time composes not yet done
#1.2.0-beta.9
- es6 move and prettier format
#1.2.0-beta.11
title support missing use Cases today yesterday tomorrow error fix pattern format changed
#1.2.0-beta.12 user date format pattern issue fix
#1.2.0-beta.13 suffix issue fix - pattern "00000" to "0000"
#1.2.0-beta.14 proptypes move to prop-types package "getValues" duplicate method build issue