1.0.6 • Published 4 months ago

i18n-v2e-plugin-react v1.0.6

Weekly downloads
-
License
ISC
Repository
github
Last release
4 months ago

i18n-v2e-plugin-react

i18n translated value to react element post processor

v2e post processor wraps i18n translated text into any html element passed in config. This is useful if you need to identify all the translated texts in a page, as with simple translation its not easy.

Add custom scripts & styles

import { getProcessor } from "i18n-v2e-plugin-react";

const MyPostProcessor = getProcessor();

i18n.use(MyPostProcessor).init({
    ...
    postProcess: [MyPostProcessor.name]
    ...
});

That's all!

With this configuration,

    const  {t} = useTranslation();
    ...
    ...


    <div>{t('your_sample_key')}</div>

will generate below HTML,

<div>
  <span class="lokalize-lbl your_sample_key">
    your sample value
  </span>
</div>

Configurations

ParameterDescriptionRequiredDefault
ignoreListlist of keys that don't need to be wrapped in html elementNo[], empty array
classNameclasses to add to the generated elementNoempty string
tagHTML tag to be usedNospan

Example

import { getProcessor } from "i18n-v2e-plugin-react";

const MyPostProcessor = getProcessor(
    ["ignore_1"],
    "class-143",
    "var"
);

i18n.use(MyPostProcessor).init({
    ...
    postProcess: [MyPostProcessor.name]
    ...
});
    const  {t} = useTranslation();
    ...
    ...


    <div>
    {t('your_sample_key')}
    {t('ignore_1')}
    </div>
<div>
  <var class="lokalize-lbl your_sample_key class-143">
    your sample value
  </var>
  Ignore 1 value
</div>

This comes really handy while writing automated UI tests where you can pick your translated texts and verify the translation.

Thanks.

1.0.6

4 months ago

1.0.5

4 months ago

1.0.4

4 months ago

1.0.3

4 months ago

1.0.2

4 months ago

1.0.1

4 months ago

1.0.0

4 months ago