React Message Translation (i18n)

In this section we will go through a step by step example on how to translate the form error messages generated by simple-body-validator in the React application.

Add The Translation Messages

The first step is to create a directory that will hold all the translation files. In the following example we will create a directory called lang, of course you can use any other directory name. Add to the directory three files, en.js for the English translations, fr.js for the French translations, and index.js.

/lang
    en.js
    fr.js
    index.js

Now we should add the corresponding entries for each of the files. You can find the full list of translation attributes here.

lang/fr.js

export default {
    required: 'Le champ :attribute est obligatoire',
    numeric: 'Le champ :attribute doit être un nombre.',
    min: {
        number: 'Le :attribute doit être au moins égal à :min.',
        string: 'Le :attribute doit comporter au moins trois caractères'
    },
}

lang/en.js

export default {
    // We will leave the en.js file empty, and just rely in the default english messages provided by the library
}

Default Messages

By default simple-body-validator returns the messages in English. The en.js in that case will be only used to override any existing message.

Now the index.js will be used to export all the translations in one file.

lang/index.js

import en from './en';
import fr from './fr';

export default {
    en, fr
};

Apply the Translated Messages

After adding all the needed translations, we need to initialize them in the App.js file using the setTranslationObject method.

App.js

import translations from './lang';
import { setTranslationObject } from 'simple-body-validator';


setTranslationObject(translations);

Of course we will also need to add a default lang for our application. In case the default lang was not set, the English language will be used as the default one. To accomplish this we will use the setDefaultLang method.

App.js

import translations from './lang';
import { setTranslationObject, setDefaultLang } from 'simple-body-validator';

setTranslationObject(translations);
// Set the French language as the default
setDefaultLang('fr');

caution

The setDefaultLang should be set after setting the translation object and not before.

A full reference to the translation feature can be found here.

Form Translation Example

Assuming that you already started with the example from the previous section. We will continue by adding a button to switch between the English and French languages.

Now let's start by adding the lang state to our code.

const [lang, setLang] = useState(validator.getLang());

Next we will add the changeLanguage method.

const changeLanguage = () => {
    validator.getLang() === 'fr' ? validator.setLang('en') : validator.setLang('fr');
    setLang(lang === 'fr' ? 'en' : 'fr');
};

As shown in the code snippet above, the setLang method can be used on the validator instance to specify the language. Now let's add the change Language button under the form tag.

<form>
    ...
</form>
<button onClick={changeLanguage}>
    Change Language
</button>

Try to switch between languages and submit the form. The messages will appear according to the selected language. However, we still face one problem, the attribute value for the French language is incorrect. To solve this problem we will navigate to the fr.js file that we created previously and add the following.

attributes: {
    name: 'Nom',
    age: 'âge',
    movie: 'film'
},

What we did above, is that we mapped each attribute to a new custom attribute name. You can read more about custom attributes here. The full code for the translation example can be found below.

In the example above we wanted to have a custom message for the min rule only when used with the age attribute. To do so, we added the following custom attribute to each of the language files.

en.js

    custom: {
        age: {
            min: 'The age must be at least :min years.',
        },
    },

fr.js

    custom: {
        age: {
            min:  'L\'âge doit être d\'au moins :min ans.',
        },
    },

You can read more about attribute custom messages here.