Custom angular wrapper for format.js & react-intl PoC examples

formatjs-examples.md

Simple text

Angular

<h2
  translate="KIBANA-DISCOVER-SEARCHING"
  default-message="Searching"
></h2>

React

<h2>
  <FormattedMessage
    id="KIBANA-DISCOVER-SEARCHING"
    defaultMessage="Searching"
  />
</h2>

Translation

{
  "KIBANA-DISCOVER-SEARCHING": "Searching"
}

Attribute

Angular

<input
  type="text"
  placeholder="{{'KIBANA-MANAGEMENT-OBJECTS-SEARCH_PLACEHOLDER' | translate: { defaultMessage: 'Search...' }}}"
>

React

import React from 'react';
import { injectIntl, intlShape } from 'react-intl';

const Component = ({ intl }) => (
  <input
    type="text"
    placeholder={intl.formatMessage({
      id: 'KIBANA-MANAGEMENT-OBJECTS-SEARCH_PLACEHOLDER',
      defaultMessage: 'Search...',
    })}
  />
);

export default injectIntl(Component);

Attribute with variables interpolation

Angular

<input
  type="text"
  placeholder="{{'KIBANA-MANAGEMENT-OBJECTS-SEARCH_PLACEHOLDER' | translate: {
    values: { TITLE: service.title },
    defaultMessage: '{TITLE} search'
  } }}"
>

React

import React from 'react';
import { injectIntl, intlShape } from 'react-intl';

const Component = ({ intl, service }) => (
  <input
    type="text"
    placeholder={intl.formatMessage({
      id: 'KIBANA-MANAGEMENT-OBJECTS-SEARCH_PLACEHOLDER',
      defaultMessage: '{TITLE} search',
    }, { TITLE: service.title })}
  />
);

export default injectIntl(Component);

Text with plurals

Angular

<span
  translate="KIBANA-DISCOVER-HITS"
  translate-values="{HITS: hits}"
  default-message="{HITS, plural, one {# hit} other {# hits}}"
></span>

React

<FormattedMessage
  id="KIBANA-DISCOVER-HITS"
  values={{ HITS: hits }}
  defaultMessage="{HITS, plural, one {# hit} other {# hits}}"
/>

Translation

{
  "KIBANA-DISCOVER-HITS": "{HITS, plural, one {# hit} other {# hits}}"
}

Text with nested formatting

Angular

<span
  translate="KIBANA-DISCOVER-REFINE_SEARCH"
  translate-values="{SIZE: '<b>{{opts.sampleSize}}</b>'}"
  default-message="These are the first {SIZE} documents matching your search, refine your search to see others."
></span>

React

<FormattedMessage
  id="KIBANA-DISCOVER-REFINE_SEARCH"
  values={{ SIZE: <b>{opts.sampleSize}</b> }}
  defaultMessage="These are the first {SIZE} documents matching your search, refine your search to see others."
/>

Translation

{
  "KIBANA-DISCOVER-REFINE_SEARCH": "These are the first {SIZE} documents matching your search, refine your search to see others."
}

Date

Supported parameters are short, medium, long, or full.

Angular

<span
  translate="KIBANA-TODAY"
  translate-values="{ DATE: Date.now() }"
  default-message="Today is {DATE, date, medium}"
></span>

React

<FormattedMessage
  id="KIBANA-TODAY"
  values={{ DATE: Date.now() }}
  defaultMessage="Today is {DATE, date, medium}"
/>

Translation

{
  "KIBANA-TODAY": "Today is {DATE, date, medium}"
}

// 'Today is Apr 20, 2018'

Number

Supported parameters are percent, or currency.

Angular

<span
  translate="KIBANA-PERCENT"
  translate-values="{ P: 0.15 }"
  default-message="{P, number, percent}"
></span>

React

<I18n
  id="KIBANA-PERCENT"
  values={{ P: 0.15 }}
  defaultMessage="{P, number, percent}"
/>

Translation

{
  "KIBANA-PERCENT": "{P, number, percent}"
}

// '15%'

Time

Supported parameters are short, medium, long, or full.

Angular

<span
  translate="KIBANA-NOW"
  translate-values="{ T: Date.now() }"
  default-message="The time is now {T, time, medium}"
></span>

React

<I18n
  id="KIBANA-NOW"
  values={{ T: Date.now() }}
  defaultMessage="The time is now {T, time, medium}"
/>

Translation

{
  "KIBANA-NOW": "The time is now {T, time, medium}"
}

// 'The time is now 4:00:00 PM'