Ant design typography's ellipsis tooltips usage with Lingui

Question

This:

import { Typography } from 'antd'
import { Trans } from '@lingui/macro'

const TransWithEllipsis = () => {
  return (
    <Typography.Text ellipsis={{ tooltip: true }}>
      <Trans id="message_id">Message</Trans>
    </Typography.Text>
  )
}

is not working and causing some antd warnings and lingui errors: enter image description here

It seems that these ant typography components want strings as children only. How to combine these two? We could wrap <Typography.Text> with like this:

const TransWithEllipsis = () => {
  return (
    <Trans id="message_id">
      <Typography.Text ellipsis={{ tooltip: true }}>Message</Typography.Text>
    </Trans>
  )
}

But this will cause all messages in .po files to look like:

#: src/components/TransWithEllipsis.js:6
msgid "message_id"
msgstr "<0>Message</0>"

which is pretty annoying. What is the best practice here?

Just tested your first code sample and it works well for me. Does your app is wrapped with the [I18nProvider](https://lingui.dev/ref/react#i18nprovider)? — Andrii Bodnar, Feb 22 '23 at 10:41

score 0 · Answer 1 · answered Mar 12 '23 at 14:16

Try this:

import { Typography } from 'antd'
import { t } from '@lingui/macro'
import { useLingui } from '@lingui/react'

const TransWithEllipsis = () => {
  const i18n = useLingui()

  return (
    <Typography.Text ellipsis={{ tooltip: true }}>
       {t(i18n)`Message`}
    </Typography.Text>
  )
}

Ant design typography's ellipsis tooltips usage with Lingui

1 Answers1