Text label is not translated.

[mfilteau]

When attaching different translations to a field using the mask plugin, the proper translation is not selected.

label: {
   en: 'Phone Number',
   fr: 'Numéro de Téléphone',
}

Payloadcms label uses the following pattern to translate the label text.

import { useTranslation } from 'react-i18next'

...

  const { i18n } = useTranslation()

  {getTranslation(label, i18n)}

[notchris]

@mfilteau I'm working on this one now. I'm having an issue with i18n's useTranslation when passing the label prop. Is this the incorrect usage? Is it supposed to be the string "label" ?

[mfilteau]

Here's the way it works:

import { useField } from 'payload/components/forms'
import { getTranslation } from 'payload/utilities'
import React, { useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { IMaskInput } from 'react-imask'

...
  const { i18n } = useTranslation()

  return (
    <div className="field-type text">
      {label && (
        <label className="field-label" htmlFor={'field-' + name}>
          {getTranslation(label, i18n)}
          {required && <span className="required">*</span>}
        </label>
      )}
      ...

You call useTranslation from react-18next and then apply it on the label with getTranslation.

[mfilteau]

There is also an example in PayloadCMS documentation: https://payloadcms.com/docs/admin/components#label-component

[notchris]

@mfilteau

Hmm, even after following the example, I'm still getting

Type instantiation is excessively deep and possibly infinite.ts(2589)

when using const { i18n } = useTranslation()

Maybe my tsconfig is messed up?

[mfilteau]

I remember getting something like that when I added react-i18next as a direct dependency in my project. Once I relied on the version that payloadcms needs, the problem disappeared.

There's a discussion about that issue here: https://github.com/i18next/react-i18next/issues/1601

[notchris]

Good to know, thank you @mfilteau! I'll try this out when I get home from work today.

[notchris]

I got this working without any errors, but there is a warning now react-i18next:: You will need to pass in an i18next instance by using initReactI18next