@hazardouswizard/localization v0.50.0

Installing Framework

These components must be installed as yarn or npm packages. The installation is a three step process.

1. Installing Prerequisites

• Node.js
• NPM or Yarn

2. Adding the Artifactory Repository To Your Project

npm config set @scuf:registry https://artifactory-na.honeywell.com/artifactory/api/npm/SCUF-10305-stable-npm-local/

3. Adding Node Registry To Your Project

Forge UI can be installed as a yarn or npm package. Use the the following command

yarn add @hazardouswizard/common

3. Adding Node Registry To Your Project

SCUF can be installed as a yarn or npm package. Use the the following command

yarn add @hazardouswizard/localization

Components Example

Components from Forge UI can be imported by their Class name like most node dependencies with import statements to @scuf

import { LocalizationProvider } from '@hazardouswizard/localization';

Components Example

const translations = {
  en: {
    translation: {
      'test-key': "Advanced"
    }
  },
  es: {
    translation: {
      'test-key': "Avanzado"
    }
  },
  cs: {
    translation: {
      'test-key': "Pokročilé"
    }
  },
  zh: {
    translation: {
      'test-key': "进阶"
    }
  }
};

import { LocalizationProvider, Translation } from "@hazardouswizard/localization";
class TranslationExample extends React.Component {
  render() {
    return (
        <LocalizationProvider translations={translations}>
            <Translation transKey="test-key" />
        </LocalizationProvider>
    );
  }
}
<TranslationExample />;

InjectLocalization Higher Order Component (HOC)

The InjectLocalization HOC passes the t function and 'lng' props to your component or view function. It enables all the translation functionality provided by <Translation/> and <TranslationConsumer/>. Further, it asserts your component gets re-rendered on language change or changes to the translation file itself. The outputted component must be inside a <LocalizationProvider/> to work.

const translations = {
  en: {
    translation: {
      test: "Test"
    }
  }
};

import { LocalizationProvider, Translation, InjectLocalization, TranslationConsumer } from "@hazardouswizard/localization";
import { List } from '@hazardouswizard/common';

class InjectedComponentView extends React.Component {
   render() {
     const { t, addProp, lng}  = this.props;
      return (
         <List>
            <List.Content>{t('test')}</List.Content>
            <List.Content>{addProp}</List.Content>
          </List>
      );
   }
}
const InjectedComponent = InjectLocalization(InjectedComponentView);

class TranslationExample extends React.Component {
  render() {
    return (
        <LocalizationProvider translations={translations}>
           <InjectedComponent addProp="Add Prop String"/>
        </LocalizationProvider>
    );
  }
}
<TranslationExample />;