How to use react-redux-i18n - 10 common examples

renderExportLoading() {
    return (
      
        <p>{ I18n.t('application.exportDataFetchMsg') }</p>
        <div>
          {/* TODO: Loader icon change as per mockup */}
          
        </div>
        <div>
          <button>{ I18n.t('mybets.cancel') }
          </button>
        </div>
      
    )
  }

const Localize = () => (
  <div id="home-wrapper">
    <div>
      {I18n.t('application.title')}<br>  {/* =&gt; returns 'Toffe app met i18n!' for locale 'nl'*/}
      {I18n.t('export', {count: 1})}<br> {/* =&gt; returns 'Niks te exporteren' for locale 'nl'*/}
      {I18n.t('application.weird_key')}<br> {/* =&gt; returns 'Weird key' as translation is missing*/}
      {I18n.t('application.hello', {name: 'Aad'})}<br> {/* =&gt; returns 'Hallo, Aad!' for locale 'nl'*/}
      {I18n.l(1385856000000, { dateFormat: 'date.long' })}<br> {/* =&gt; returns '1 december 2013' for locale 'nl'*/}
      {I18n.l(Math.PI, { maximumFractionDigits: 2 })}<br> {/* =&gt; returns '3,14' for locale 'nl'*/}
    </div>
  </div>
);

componentWillReceiveProps(nextProps: Props) {
    const { passwordChangeResponse } = nextProps;
    // we explicitely check if success is false because it can be null if the request has not been set yet
    if (passwordChangeResponse.success === false && passwordChangeResponse.data.length > 0) {
      const firstError = passwordChangeResponse.data[0];
      let msg;
      if (firstError.type === 'nonJson') {
        msg = I18n.t('login.somethingWentWrong');
      } else {
        msg = firstError.message;
      }
      displayAlert('danger', msg, true);
    }
  }

handleDownloadClick(){
    const exportData = this.props.exportData.toJS();
    let content = ExportUtils.formatDataForExport(exportData, null, { toBytes: true });
    let blob = new Blob([content], { type: 'application/vnd.ms-excel;charset=charset=utf-8' });

    let prefix;
    switch (this.props.type) {
      case ExportTypes.TRANSACTION_HISTORY: {
        prefix = I18n.t('myAccount.screenName')
        break;
      }
      case ExportTypes.RESOLVED_BETS: {
        prefix = I18n.t('mybets.screenName')
        break;
      }
      default: break;
    }

    FileSaverUtils.saveAs(blob, prefix + moment().format('YYYY-MM-DD_HH-mm-ss') + '.xlsx');

    // Reset export
    this.props.handleResetExport();
  }

export default function validate(values: Values): Errors {
  const errors = {};
  if (!values.title) {
    errors.title = I18n.t('error.required');
  }
  const faviconErrors = validateFavicon(values.favicon);
  if (faviconErrors) {
    errors.favicon = faviconErrors;
  }

  return errors;
}

export default function validate(values: ResourcesValues): { pageTitle: ?string, resources: Array } {
  return {
    pageTitle: i18nValueIsEmpty(values.pageTitle) ? I18n.t('error.required') : undefined,
    resources: values.resources.map(validateResource)
  };
}

handleClick = (e: SyntheticEvent) => {
    e.preventDefault();
    e.stopPropagation();
    const body = ;
    const title = I18n.t('common.editor.attachmentPlugin.title');
    this.props.setModalContent(body, title);
  };

openModal = (e: SyntheticEvent) => {
    e.preventDefault();
    e.stopPropagation();
    const body = ;
    const title = I18n.t('common.editor.linkPlugin.title');
    this.props.setModalContent(body, title);
  };

openModal = (e: SyntheticEvent, initialValues: FormValues) => {
    e.preventDefault();
    e.stopPropagation();
    const body = ;
    const title = I18n.t('common.editor.linkPlugin.editLinkForm.title');
    this.props.setModalContent(body, title);
  };

renderRecoveryButtonFields = (fields) =>{
    const minimumLength = 22;
    const disabled = fields.recoveryDisabled
      || fields.new_password.input.value !== fields.new_password_confirm.input.value
      || fields.new_password_confirm.input.value.length < minimumLength;
    return (
      <div>
          <button disabled="{" type="primary">
            {I18n.t('signup.download_rec_text')}
          </button>
      </div>
    )
  }