React-i18next: Using i18next in enums (TypeScript)

[0FilipK]

Hello, I'm using React with react-i18next plugin and I want to translate value of enums. Is it possible?

Code:

enum catSize {
    SMALL = 'Small',
    MEDIUM = 'Medium',
    LARGE = 'Large',
}

and I'd like to convert this to something like:

enum catSize {
    SMALL = t('sizes.small'),
    MEDIUM = t('sizes.medium'),
    LARGE = t('sizes.large'),
}

but obviously it won't work because we don't have access to t function which is provided by HOC. Is there any trick to achive translations outside render function and use it in my case?

[jamuhl]

you can directly access t on your i18n instance: https://www.i18next.com/overview/api#t

just make sure you have the needed namespace loaded -> fill enum in/after init callback: https://www.i18next.com/overview/api#init

[0FilipK]

Makes sense but TSLint shows:
TS2553: Computed values are not permitted in an enum with string valued members

Code:

enum catSize {
    SMALL = I18n.t('sizes.small'),
    MEDIUM = I18n.t('sizes.medium'),
    LARGE = I18n.t('sizes.large'),
}

BTW. I will take this opportunity to ask about something else. If i have exported my instance of I18Next so it's better to use this instance everywhere instead of using additional HOC to get this t function right?

[jamuhl]

The hoc does more than just passing down a t function -> asserts namespaces were loaded (wait option), triggers rerender on language change, ...

[0FilipK]

Ok, but I'm using only one namespace and I disabled language change by user (language can be changed only on deploy - based on env variables).

[jamuhl]

in that case you can also just use i18n.t directly if you prefer...https://react.i18next.com/#what-is-react-i-18-next see first hint

[0FilipK]

Ohh, thanks

[anddon]

@0FilipK did you manage to find a decent solution for translating members of string enums?

[0FilipK]

@anddon Unfortunately I didn't find solution. I just hardcoded values.

[anddon]

@0FilipK Seems like the only way, yeah. Thank you.

[gmarokov]

@0FilipK Seems like the only way, yeah. Thank you.

How did you guys hardcoded the values