CODEWITHSUNDEEP
reactjsantdtranslationlinguijs
Bartłomiej Wiejak
Bartłomiej Wiejak

Reputation: 1

Ant design typography's ellipsis tooltips usage with Lingui

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?

Upvotes: 0

Views: 391

Answers (1)

Timofey Yatsenko
Timofey Yatsenko

Reputation: 937

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>
  )
}

Upvotes: 0

Related Questions