Dynamically pull a translation by reference

[proddy]

In React, is there a way I can pull a translation using a key? For example assuming I have the translations mapped correctly in the <locale>/index.ts files and I'm using const { LL } = useI18nContext(); can I do :

LL[1] or even better LL[name] if name is a property ?

As you describe in the example https://github.com/ivanhofer/typesafe-i18n/tree/main/packages/runtime#arrays

The reason is in my forms I'm using the async-validator package to show field errors

[ivanhofer]

Sure, you can do that. But keep in mind, that you should type the name property accordingly to make sure you don't try to access an unknown translation, which result in an empty string beeing rendered.

import type { Locales, Translation } from './i18n/i18n-types'
import { useI18nContext } from './i18n/i18n-react'

const { LL } = useI18nContext()

// basic
let name: keyof Translation = '...'

return <>{LL[name]()}</>


// or nested
let name: keyof Translation['formValidation'] = '...'

return <>{LL.formValidation[name]()}</>

Please also keep in mind that all the translations you are trying to access should have the same "shape". If you are passing arguments, they should have the same name and all translations should take the same amount of arguments, or else you will get TypeScript errors that you have to handle with //@ts-ignore which would be a code smell and can lead to errors in the future.

[proddy]

perfect, thanks for the quick answer. I'll try that out.