@procore/labs-i18n-extensions v0.5.0

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

Hook

Params

Returns