localization

With this package it is possible to display the site in different languages.

The respective lankkey and locale are selected and output using the IntlMessage.

Import

Use the following command to import:

import IntlMessage from 'multilanguagers/index'

Use

Use Import the following command to paste:

return ({IntlMessage({messageId:'template.dont.found', locale:'de'})})

or as jsx element:

return (
    <IntlMessage messageId={'template.dont.found'} locale={'de'}/>
)

So that you can store the languages, you must create the Register folder in the src folder and the file there RegisterLanguage.tsx with the following content:

import de from './de_DE.json'
import en from './en_EN.json'

export const RegisterLanguageDE = {
    ...de
}

export const RegisterLanguageEN = {
    ...en
}


const deLang = {
    messages: {
        ...RegisterLanguageDE
    },
    locale: 'de',
};
const EnLang = {
    messages: {
        ...RegisterLanguageEN
    },
    locale: 'en',
};

export const AppLocale: any = {
    "de": deLang,
    "en": EnLang
};

Now you can use the tabs for DE and EN to map all Lang files here and thus merge all DE and EN files into one.

This gives the IntlMessage immediate access to it and it can be output.

You can also add new ones. As an example adding a Spanish version:

import de from './de_DE.json'
import en from './en_EN.json'
import es from './es_ES.json'

export const RegisterLanguageDE = {
    ...de
}

export const RegisterLanguageEN = {
    ...en
}

export const RegisterLanguageES = {
    ...es
}


const deLang = {
    messages: {
        ...RegisterLanguageDE
    },
    locale: 'de',
};
const EnLang = {
    messages: {
        ...RegisterLanguageEN
    },
    locale: 'en',
};

const EsLang = {
    messages: {
        ...RegisterLanguageES
    },
    locale: 'es',
};

export const AppLocale: any = {
    "de": deLang,
    "en": EnLang,
    "es": EsLang
};

You can also fill this with all existing Spanish Json files using RegisterLanguageES.

Search and Replace

You can store within the Lang Key Param and then easily exchange them. Here is an example:

IntlMessage({
    messageId: 'template.dont.found',
    locale: 'de',
    param: '[test]',
    replacement: 'ausgetauscht',
    preperator: 'replace'
})

You can also have HTML code in your key, for this you have to read the IntlMessage like this:

<p dangerouslySetInnerHTML={{__html: IntlMessage({messageId: 'template.dont.found', locale: 'de'})}}/>

But it is always better not to inject. But to build it into the right tag right away, see example:

<p>
    {IntlMessage({messageId: 'template.dont.found', locale: 'de'})}
</p>

or as jsx:

<p>
    <IntlMessage messageId={'template.dont.found'} locale={'de'}/>
</p>

You can also store [bold] and [/bold] in the LangKey, for example, which will automatically be replaced by <strong> and </strong>

Prop Types

| Prop name | Type | Description | |-------------|---------|-------------------| | messageId | string | Lankey | | locale | string | LangCode de,en | | param | string | Params | | replacement | string | Replacement | | preperator | string | Preperator use | |htmlReplace| boolean | clear HTML Code |