@procore/labs-i18n-extensions
Extensions for core-react/i18n-provider
$ cnpm install @procore/labs-i18n-extensions 
SYNC missed versions from official npm registry.

i18n-extensions

Disclaimer: Meant for Procore internal use only.

Utility to provide translations for the decoupled frontend applications, aka "hydra clients".
As part of the initiative to move outside the monolith, this package provides functionality to fetch translations file for a given client.

The package encapsulated core-react/I18n so the consuming application code should not change much.

Note: Consuming application should not wrap itself within <I18n.Provider> from @procore/core-react

As of now, the provider accepts locale and companyId to as optional props and fallbacks on of the window.Procore.Environment for fetching locale and company_id. In the future, intentions are to remove this dependency and accept them as config props.

P.S.: Loads global translations by default.

Install

yarn add @procore/labs-i18n-extensions

Usage

Context

import { render } from 'react-dom';
import { I18nExtensions } from '@procore/labs-i18n-extensions'; // replaces I18n
import { Application } from './Application';

render(
  <I18nExtensions clientName="${CLIENT_NAME}">
    <Application />
  </I18nExtensions>,
  document.getElementById('root')
);
Changes
import { render } from 'react-dom';
- import { I18n } from '@procore/core-react'; // removed
+ import { I18nExtensions } from '@procore/labs-i18n-extensions'; // replaces I18n
import { Application } from './Application';

render(
- <I18n.Provider I18n={I18nObject}>
+ <I18nExtensions clientName="${CLIENT_NAME}">
    <Application />
- </I18n.Provider>,
+ </I18nExtensions>,
  document.getElementById('root')
);

Hook

import { useI18nFetcher } from '@procore/labs-i18n-extensions';

// in component
const { loadTranslation, getTranslationStatus } = useI18nFetcher({
  companyId,
  locale
});

// loads translation
loadTranslation('${CLIENT_NAME}');

// returns translation status: loaded, loading, failed
const translationStatus = getTranslationStatus('${CLIENT_NAME'});

Props

Context

Props Description Type Default
clientName Name of the client(s) to pull translations for. string | string[] N/A (Required)
companyId companyId to be passed along to the translations fetch endpoint. (optional) string window.Procore.Environment.companyId
configUrl Endpoint to fetch the translations file location from. (optional) string /rest/v1.0/internal/i18n/translation_file_url
loadingIndicator Custom loading indicator to replace default loading indicator (Spinner). (optional) ReactNode core-react Spinner
locale locale for the translations. (optional) Locale window.Procore.Environment.locale
noDefaults Disable injection of default translations. (optional) boolean false

Hook

Params
Param Description Type
companyId companyId to be passed along to the translations fetch endpoint. string
configUrl Endpoint to fetch the translations file location from. (optional) string
locale locale for the translations. Locale
Returns
Key Description Type Param Returns
loadTranslation Load translation for a given client. Function string void
N/A I18n I18n object. N/A N/A
getTranslationStatus Get translation status for a given client. Function string Loading Status: 'loaded', 'loading', 'failed'

Current Tags

  • 0.4.3                                ...           latest (15 days ago)

5 Versions

  • 0.4.3                                ...           15 days ago
  • 0.4.2                                ...           a month ago
  • 0.4.1                                ...           a month ago
  • 0.4.0                                ...           2 months ago
  • 0.3.0                                ...           2 months ago

Copyright 2014 - 2016 © taobao.org |