TransPropsExample.tsx

import React from "react";
import { Trans } from "@lingui/macro";
import { TransRenderProps } from "@lingui/react";

const RenderProps: React.FC<TransRenderProps> = ({ id, translation }) => {
   if (translation) {
      return (
        <>
           {translation}
        </>
      );
   }
   return (
     <>
        {id}
     </>
   );
}

export const TransPropsExample: React.FC = () => {
   const getSomeValue = () => {
      return 25
   }
   return (
     <Trans
       comment='This message in an example without any context'
       /*
        NOTE:
        1. will not pass TransRenderProps
        2. You can't use component with render prop - choose
       */
       // component={RenderProps} // NOTE: will not pass TransRenderProps
       render={RenderProps}
       values={{
          name: 'hello'
       }}

     >A message that makes no sense. Value: {getSomeValue()}</Trans>
   )
}