> For the complete documentation index, see [llms.txt](https://notes.lirenxn.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://notes.lirenxn.com/2020/wk-notes-03-16-i18n-solution.md).

# Wk-notes-03-16-i18n-solution

### i18n Solution <a href="#i18n-solution" id="i18n-solution"></a>

#### Solution <a href="#solution" id="solution"></a>

`Provider` provides `intl` dictionary, `Consumer` takes the `intl` and `translate()` it with hardcoded (nested)id, and fallback,

**Pluralise and templating:**

In dictionary, each fields supports plural

```javascript
// Dictionary:
"passengers": { 
  "none":"No passengers", 
  "one":"One passenger", 
  "many":"{{count}} passengers"
}

// Component:
<Text id="passengers" plural={0} /> // "No passengers"
<Text id="passengers" plural={1} /> // "One passenger"
<Text id="passengers" plural={2} fields={{ count: 2 }} /> // "2 passengers"

// HOC 
withIntl((t) => {
    return t('passengers', "fallback", { plural:2 })
})
```

#### Basic function <a href="#basic-function" id="basic-function"></a>

**Context**

`createContext({ dictionary: null, highlight: false });`

**Provider:**

`<IntlContext.Provider value={{ highlight, dictionary }}>{children}</IntlContext.Provider>`

**Consumer:**

`<IntlContext.Consumer>(intl) => {children}</IntlContext.Consumer>`

or

`useContext(IntlContext)`

Detail in consumer:

* Dealing with hightlight
* Expose just enough api
* call `translate()`

```javascript
const intl = useContext(IntlContext);
const t = useCallback(
  (id, fallback, opts = {}) => {
    const highlight = opts.highlight != null ? opts.highlight : intl.highlight;
    const value = translate(id, intl && intl.dictionary, opts.fields, opts.plural, fallback);
    return highlight ? <Highlight id={id} value={value} fallback={fallback} /> : value;
  },
  [intl]
);
```

**translate() from intl**

```javascript
translate(
  id: string, 
  dictionary: object, 
  fields: object, 
  plural: number, 
  fallback: string
) => {
  let value = dictionary && delve(dictionary, id);

  if ((plural || plural === 0) && value && typeof value === 'object') {
    if (Array.isArray(value)) {
      value = value[plural] || value[0];
    } else if (plural === 0 && value.none != null) {
      value = value.none;
    } else if (plural === 1 && (value.one != null || value.singular != null)) {
      value = value.one || value.singular;
    } else {
      value = value.some || value.many || value.plural || value.other || value;
    }
  }

  return (value && template(value, fields, dictionary)) || fallback || null;
}
```

return translated string.