# Mozilla L20n

Of all the concepts there are three main concepts that are required to be understood by developers using L20n:

  • Entity: Entities are containers for information. You use entities to identify, store, and recall information to be used in the software's UI.

  • Context: Each context stores information about languages available to it, downloaded resource files and all entities in these resource files. Software developers can create contexts and query them for values of specific entities.

  • Context data: Context data is how entities defined in L20n resources can interact with non-localizable variables provided by the developer. Context data is generally unknown at the time of writing the L20n code. By assigning values to it, the developer makes it known at runtime.

To use L20n you need to get localizers to write language specific files following the conventions set by the L20n framework. These files (should be named strings.l20n) should then be stored in the public/locales folder with names reflecting language codes (preferably ISO 639-1 format). You can use currenly only use 1 file per language and should follow this format: public/locales/<two-letter-lang-code>/strings.l20n. If in doubt, refer to the file structure in public/locales.

Importing L20n:

First, import the L20n plugin in your src/plugins.js like so:

import 'js/l20n.js';
NOTE: If you are still using Rubix 4.0.0, we have separated the l20n javascript plugin from the @sketchpixy/rubix NPM package. If the l20n.js file is missing in your public directory you can either copy the file from the latest Rubix 4.1.0 update (found in rubix/demo/public/js/l20n.js) or you can get the file directly from here.

src/main.js:

Then you would need to import the L20n React component, initialize locales and call l20n.ready() once routes have been rendered like so:

import React from 'react';
import ReactDOM from 'react-dom';

import routes from './routes';
import render from '@sketchpixy/rubix/lib/node/router';
import l20n from '@sketchpixy/rubix/lib/L20n';

l20n.initializeLocales({
  'locales': ['en-US', 'fr', 'it', 'ge', 'ar', 'ch'],
  'default': 'en-US'
});

render(routes, () => {
  l20n.ready();
});

if (module.hot) {
  module.hot.accept('./routes', () => {
    // reload routes again
    require('./routes').default
    render(routes);
  });
}

Entity component:

The markup for invoking L20n entities is as follows:


import { Entity } from '@sketchpixy/rubix/lib/L20n';

<Entity entity='some-entity-here' data={{a: 'some context data', b: 'some other context data'}} />


The Entity component defined above requires you to have 'entity' property defined alongwith an optional 'data' property. React takes care of keeping the rendered data in sync and the resultant output is actually a span element (so it can be used within Buttons or any other block element without compromising the interface).

# Entity Props

NameTypeDefaultDescription
entitystringEntity
dataObject|string|nullEntity Data
componentClasselementTypeYou can use a custom element for this component
componentAttributestringThe componentAttribute that needs to be localized. For example, to localize the placeholder of a FormControl you would write:
<Entity componentClass={FormControl}
    type='text'
    componentAttribute="placeholder"
    entity='some-entity-here'
    data={{a: 'some context data',
           b: 'some other context data'}} />