npm package: @hazardouswizard/localization
Description: These components must be installed as yarn or npm packages. The installation is a three step process.
Latest version: 0.50.0
Deprecated: this package has been deprecated

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

### 1. Installing Prerequisites
* [Node.js](https://nodejs.org/en/download/)
* [NPM](https://www.npmjs.com/) or [Yarn](https://yarnpkg.com/en/)

### 2. Adding the Artifactory Repository To Your Project
```shell
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

```shell
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

```shell
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`

```js static
import { LocalizationProvider } from '@hazardouswizard/localization';
```

### Components Example
```jsx
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. 

```jsx
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 />;
```