Using translations in a ts file

[galkatz373]

First I have to say the library is amazing.
Making my website for multiple languages, never been easier.

However I'm trying the use the translations inside a seperate .ts file for validations, and I can't figure out to do it properly.

An example:

export const required = (value: string | undefined) => {
  if (!value || value.length === 0) {
    return "must enter field";
  }
};

I'm trying to replace the string at the end with my translation.
Thanks in advance.

[ivanhofer]

Hi @galkatz373,
thanks! I am glad to hear you like the project.

I assume you are using the library inside a 'react' application. Is this correct?
If yes, you would need to pass the LL translation object to your validation function, to keep the language synchronized with your application.

import type { TranslationFunctions } from './i18n/i18n-types'

export const required = (LL: TranslationFunctions, value: string | undefined) => {
	if (!value || value.length === 0) {
	  return LL.REQUIRED()
	}
 }

Hope this helps :)

[galkatz373]

Hi @galkatz373,
thanks! I am glad to hear you like the project.

I assume you are using the library inside a 'react' application. Is this correct?
If yes, you would need to pass the LL translation object to your validation function, to keep the language synchronized with your application.

import type { TranslationFunctions } from './i18n/i18n-types'

export const required = (LL: TranslationFunctions, value: string | undefined) => {
	if (!value || value.length === 0) {
	  return LL.REQUIRED()
	}
 }

Hope this helps :)

I thought about it, but then I have to pass the translation object each time I call the validation function.

[ivanhofer]

It's hard to tell what exactly could work for you without seeing the code.

But you could wrap it like this:

import type { TranslationFunctions } from './i18n/i18n-types'

const createRequiredValidator = (LL: TranslationFunctions) => {
    return (value: string | undefined) => {
	if (!value || value.length === 0) {
	  return LL.REQUIRED()
	}
    }
 }

// later in your component
const required = createRequiredValidator(LL)

You would make sure to call createRequiredValidator again every time the language changes.

[galkatz373]

The last solution is better, thanks for the help!