Localization

Preamble

Websites these days are more and more multilangual, and react-formilicious tries not to stand in your way on that. For this reason we have a very simple localization system built into Formilicious which tries to integrate as much into your existing system as possible due to its sheer simplicity.

There aren't a lot of things to translate in formilicious, since you are the one who will add fields, etc. For the things that are translatable (Submit button text, some default error messages, ...) we have a mutable object in the respective module that can be assigned the text values.

Applying a locale

It is important to apply your locale before rendering a form. Otherwise you might get rather odd results. If you change the locale you must manually ensure to re-render all forms.

import de from '@react-formilicious/core/locale/de';

de();

<Form
  data={{
    name: "Patrick Sachs"
  }}
  onSubmit={data => alert(JSON.stringify(data))}
  elements={[
    {
      type: TextField,
      key: "name",
      name: "🙃 Nutzername",
      placeholder: "🙃 Geben Sie hier Ihren Nutzernamen an!"
    }
  ]}>

Locale style

All locales are written in a formal business compatible style. For this reason we also include an en locale, which is mostly the default locale, but a bit more format and without any emojis. 😇🙂

Writing your own locale

Maybe a default locale doesn't do it for you. You might just need a small adjustment, or roll with something really fancy.

The best way to see how a locale is created is by looking at the source code of an existing one. Let's look at the english one:

import * as validationResult from "../validators/ValidationResult";
import * as defaultButtons from "../defaultButtons";

const en = () => {
  validationResult.text.pending = "Please wait...";
  validationResult.text.timeout = "This field took longer to validate than expected. Please try again later.";
  validationResult.text.invalid = "Invalid value";

  defaultButtons.submit.name = "Submit";
  defaultButtons.reset.name = "Reset";
};

export default en;

Going from there should be rather straightforward:

// my-own-locales/arr.js
import * as validationResult from "@react-formilicious/core/validators/ValidationResult";
import * as defaultButtons from "@react-formilicious/core/defaultButtons";

const arr = () => {
  validationResult.text.pending = "Sailing ...";
  validationResult.text.timeout = "Our first validation mate is slacking off!";
  validationResult.text.invalid = "Curses!";

  defaultButtons.submit.name = "🏴 Bury the loot!";
  defaultButtons.reset.name = "Return to land";
};

export default arr;

// index.js
import arr from './my-own-locale/arr';

arr();

I urge you to not copy this text and adjust it from there, but to actually copy form the source file in case some properties are added/changed in the latest version.

We're done! 🎉

You now know how to create & use locales in react-formilicious.

Feel free to contribute a locale to this project in your own native language if it is missing or you think the one included could be improved upon.