Installing Framework
These components must be installed as yarn or npm packages. The installation is a three step process.
1. Installing Prerequisites
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 />;