# fz-i18n

> i18n handling

Latest version **1.2.0-beta.15** (published 2020-09-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install fz-i18n
pnpm add fz-i18n
yarn add fz-i18n
bun add fz-i18n
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0-beta.15 |
| Published | 2020-09-04 |
| First published | 2016-12-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 369.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | vimalesan.ceg@gmail.com |
| Maintainers | vasikaran, vimalesan |
| Keywords | react, i18n, i18n, component |

## Links

- npm: https://www.npmjs.com/package/fz-i18n
- Repository: https://github.com/vimalceg/fz-i18n
- Homepage: https://github.com/vimalceg/fz-i18n#readme
- Issues: https://github.com/vimalceg/fz-i18n/issues
- npm.io page: https://npm.io/package/fz-i18n

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.0-beta.15 (latest) — 2020-09-04
- 1.2.0-beta.14 — 2018-08-28
- 1.2.0-beta.13 — 2018-07-04
- 1.2.0-beta.12 — 2018-03-31
- 1.2.0-beta.11 — 2018-03-28
- 1.2.0-beta.10 — 2017-09-05
- 1.2.0-beta.9 — 2017-09-01
- 1.2.0-beta.8 — 2017-03-21
- 1.2.0-beta.7 — 2017-03-09
- 1.2.0-beta.6 — 2017-03-06
- 1.2.0-beta.5 — 2017-03-02
- 1.2.0-beta.4 — 2017-02-21
- 1.2.0-beta.3 — 2017-02-13
- 1.2.0-beta.2 — 2017-02-02
- 1.2.0-beta.1 — 2017-01-06
- … 13 more at https://npm.io/package/fz-i18n/versions

## README

# fz-i18n

# Components

1.  I18NProvider
2.  ConnectI18NProvider
3.  I18N
4.  FormatText
5.  PluralFormat
6.  DateTimeDiffFormat
7.  UserTimeDiffFormat

# How to use

```
   <I18NProvider i18n={{key:"value"}} timeZone="Asia/kolkatta">
      <YourApp>
      </YourApp>
   </I18NProvider>
```

```
   <ConnectI18NProvider i18n={(state)=>{return state.i18nObj }} timeZone={(state)=>state.user.timeZone}
   onChange=((accept,reject)=>{call accept or reject})>
      <YourApp>
      </YourApp>
   </ConnectI18NProvider>
```

```
   <FormatText i18NKey="" values={[] | ""}/>
```

```
   <PluralFormat one="i18n key for singluar" many="i18n key for plural" zero="i18n key for zero" value={1}/>
```

```
   <DateTimeDiffFormat from="2016-10-25T05:55:28.000Z" fromTimeZone="Asia/Kolkata" to="2016-10-18T05:55:29.000Z" toTimeZone="Asia/Kolkata"
        today={{key:"today",params:["hh","mm","ss"]}}
        yesterday={{key:"yesterday",params:["hh","mm","ss"]}}
        tomorrow={{key:"tomorrow",params:["hh","mm","ss"]}}
        others={({years, days, hours, minutes})=>{
          if( days > 7){
            return "DD-MM-YYYY"
          }else{
            return getDateKeyWithParam(years, days, hours, minutes)
          }
        }}
        ago="ago"
        later="later"
        />
```

```
  <UserTimeDiffFormat to="2016-12-19T05:55:29.000Z" today={{key:"today",params:["hh","mm","ss"]}}
    yesterday={{key:"yesterday",params:["hh","mm","ss"]}}
    tomorrow={{key:"tomorrow",params:["hh","mm","ss"]}}
    others={({years, days, hours, minutes})=>{
      if( days > 7){
         return "DD-MM-YYYY"
      }else{
         return getDateKeyWithParam(years, days, hours, minutes)
      }
        }}
        ago="ago"
        later="later"
        />
```

# 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

#1.2.0-beta.15
Support For Date/Month Translations

---
_Source: https://npm.io/package/fz-i18n · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._