#Trouble with Custom Translations in PayloadCMS

18 messages · Page 1 of 1 (latest)

high masonBOT
#

how i can add a custom translation and use useTranslation in client component
i followed the documentation but dont get a result

the default translation is work well in admin but the custom dont

payload.config.ts:

import { ar } from '@payloadcms/translations/languages/ar'
import { en } from '@payloadcms/translations/languages/en'
 i18n: {
    supportedLanguages: { ar, en },
    fallbackLanguage: 'en',
    translations: {
      ar: {
        custom: {
          search: 'بحث',
        },
      },
      en: {
        custom: {
          search: 'Search',
        },
      },
    },
  },

frontend Component:

'use client'
import type React from 'react'
import { useTranslation } from '@payloadcms/ui'

export const MyComponent: React.FC = () => {
  const { t } = useTranslation()

  return t('custom:search')
}

dose there any thinge wrong with this impementation ????

acoustic hamletBOT
#

Original message from @void widget - Moved from #general message

lost patrol
#

by frontend what do you mean exactly?

#

in payload UI?

void widget
#

in the client side components

lost patrol
#

then yeah those translations should work

#

what does it show?

void widget
#

i dont get any thing even the default lang dont appear

lost patrol
#

if you try and render just a static element does it show?

# 
return <div>hi</div>
void widget
#

no it will show but using t function dose not return any thing

lost patrol
#

id open an issue with a basic reproduction

#

thats the config we use in our plugins as well so it should work, unless you have a plugin overriding the config or something

void widget
#

the default translation from @abstract musk/translations/languages/... works well with admin dashboard but any custom translations add it to i18n.translations dose not work

void widget
hasty iris
#

Same issue here, but I'm trying to use custom translations on interface text in the footer of my website (for example)