Best practise for handling helper files (outside of components)

[TomBell95]

I have helper.ts files across my app that contains shared variables and I want to update the text values so they use translations... What is the best approach for this ?

Example:

export const userRoleMap = {
  ADMIN: t('admin'),
  ENGINEER: t('engineer'),
}

Solutions I've tried:

import i18next from 'i18next'

const t = i18next.getFixedT(null, 'common')

export const userRoleMap = {
  ADMIN: t('admin'),
  ENGINEER: t('engineer'),
}

import { TFunction } from 'i18next'

export const getUserRoleMap = (t: TFunction) => ({
  ADMIN: t('admin'),
  ENGINEER: t('engineer'),
})

// inside a component
const { t } = useTranslation('common')
const userRoleMap = getUserRoleMap(t)

Solution 2 works, but I'm not sure this is the best approach

[adrai]

Solution 2 is better... you always need to pass down the initialized t function

[TomBell95]

Thanks @adrai