Defining Custom React Components as a Wrapper for the Trans Macro

[torhector2]

Hello,

I'm currently working on a project where we'd like to wrap the <Trans> macro within our own text components for more reusable and clean code. Here's an example of what we'd like to achieve:

import { Heading } from '@chakra-ui/react';
import { Trans } from '@lingui/macro';
import React from 'react';

export const TranslatedHeading = ({ children }: { children: React.ReactElement | string }) => {
  return (
    <Heading>
      <Trans>{children}</Trans>
    </Heading>
  );
};

This way you could use it like:

<TranslatedHeading>Text to extract 1</TranslatedHeading>
<TranslatedHeading>Text to extract 2</TranslatedHeading>

and after running lingui extract we would get the same results as if they're wrapped in <Trans>.

This way, we could use our own components like TranslatedHeading, which would internally use the Trans macro for handling translations, while also applying the styling and other functionality provided by our component.

Is there a way to achieve this directly, or could this be a feature considered for future releases? I believe it could provide additional flexibility for projects that have their own component libraries.

Thank you for your time and your work on this project.

[timofei-iatsenko]

No, it's not possible and never would be. The extractor operates on AST, it doesn't execute your code. All your strings should be explicitly marked for extraction with either Trans, t, or any of i18n methods to be picked up by extractor.

So you library could be used only this way:

import { Heading } from '@chakra-ui/react';
import { Trans } from '@lingui/macro';

<Heading>
    <Trans>My message!</Trans> <!-- // Message declared in-place, and could be statically analyzed --> 
</Heading>