Mongez React Localization

A converter for Mongez Localization to allow passing jsx element to the translator.

Installation

npm i @mongez/react-localization

OR

yarn add @mongez/react-localization

JSX Converter

This converter will allow you to pass jsx elements to the translator. Just import the converter and use it as a translator.

// src/config/localization.ts

import { jsxConverter } from "@mongez/react-localization";
import { setLocalizationConfigurations } from "@mongez/localization";

setLocalizationConfigurations({
  /**
   * Default locale code
   *
   * @default en
   */
  defaultLocaleCode: "ar",
  /**
   * Fall back locale code
   *
   * @default en
   */
  fallback: "en",
  /**
   * Converter function to convert the placeholder value to jsx element
   */
  converter: jsxConverter,
});

Example of usage

import { extend } from '@mongez/localization';

extend("en", {
  minimumOrderPurchase: "Minimum purchase amount for this order is :amount USD",
});

export function RedComponent() {
  return (
    <>
      {trans('minimumOrderPurchase', { amount: <strong style={{color: 'red'}}>12</strong> })}
    </strong>
  )
}

Tests

Run yarn test or npm run test to run the tests.