Create your Custom Component with i18n-keyless props

In React Native, it is much recommended already to create a component MyText or whatever you call it, otherwise managing font-family is really tough. Therefore it will be much straight forward to integrate i18n-keyless.

For web React projects it is less common, but for using i18n-keyless it is recommended too.

Here are our current implementation in our production projetcs.

React (web)

/src/components/MyText.tsx

import { I18nKeylessText, type I18nKeylessTextProps } from "i18n-keyless-react";

interface MyTextProps {
  skipTranslation?: boolean;
  i18nProps?: I18nKeylessTextProps;
  children: I18nKeylessTextProps["children"];
  debug?: boolean;
}

// you could take the opportunity to add `className, `style`, or `font-family`, whatever  

export default function MyText({
  children,
  skipTranslation = false,
  debug = false,
}: MyTextProps) {

  if (skipTranslation) {
    if (debug) {
      console.log("skipTranslation", children);
    }
    return children;
  }

  if (debug) {
    console.log("children translated", children);
  }

  return (
    <I18nKeylessText
      context={i18nProps?.context}
      replace={i18nProps?.replace}
      forceTemporary={i18nProps?.forceTemporary}
      debug={debug || i18nProps?.debug}
    >
      {children}
    </I18nKeylessText>
  );
}

React Native

/src/components/MyText.tsx

import { StyleProp, Text, TextProps, TextStyle } from "react-native";
import { I18nKeylessText, type I18nKeylessTextProps } from "i18n-keyless-react";

interface MyTextProps {
  style?: StyleProp<TextStyle>;
  textProps?: TextProps;
  skipTranslation?: boolean;
  i18nProps?: I18nKeylessTextProps;
  children: I18nKeylessTextProps["children"];
  debug?: boolean;
}

export default function MyText({
  style = {},
  children,
  textProps,
  skipTranslation = false,
  debug = false,
}: MyTextProps) {
  if (skipTranslation) {
    if (debug) {
      console.log("skipTranslation", children);
    }
    return (
      <Text
        style={style}
        {...textProps}
      >
        {children}
      </Text>
    );
  }
  if (debug) {
    console.log("children translated", children);
  }
  return (
    <Text
      style={style}
      {...textProps}
    >
      <I18nKeylessText
        context={i18nProps?.context}
        replace={i18nProps?.replace}
        forceTemporary={i18nProps?.forceTemporary}
        debug={debug || i18nProps?.debug}
      >
        {children}
      </I18nKeylessText>
    </Text>
  );
}