@otosense/locale

oto-locale

Small UI localization utility build with MobX. Reads the current locale from the browser, then downloads a JSON file containing strings and string templates for that locale.

Usage

Initialization

import LocaleStore from 'oto-locale';

// Load locale from browser from default file path `/static/json/locales/${LOCALE}.json` 
const localeStore: LocaleStore = new LocaleStore();

Basic strings

const plainString: string = localeStore.strings.plainExample;
const plainNestedString: string = localStore.strings.nestedExamples.plain;

Keyword formatting

localeStore.strings.formatExample = 'Template string with variables {a}, {b}, {c}';
const keywords: any = {a: '1', b: '2', c: '3'}
const formattedString: string = localeStore.getFormattedString('formatExample', keywords);
// 'Template string with variables 1, 2, 3'

Positional formatting

localeStore.strings.formatExample2 = 'Template string with variables {0}, {1}, {2}'
const values: string[] = ['a', 'b', 'c']
const formattedString2: string = localeStore.getFormattedString('formatExample2', values);
// 'Template string with variables a, b, c'

Formatting nested values

localeStore.strings.nestedExamples = {
    formatExample3: 'Nested template with a variable {0}'
}
const value: string[] = ['A']
const formattedString3: string = localeStore.getFormattedString('nestedExamples.formatExample3', value);
// 'Nested template with a variable A'

Overriding default file path

const localeDirectory: string = '/src/shared/localeStrings'; // should not have a trailing slash
const newLocaleStore: LocaleStore = new LocaleStore(localeDirectory);

Manually setting locale

import { LOCALES } from 'oto-locale';
newLocaleStore.setLocale(LOCALES.DANISH);

// Alternative using standard locale codes
newLocaleStore.setLocale('es');

Usage with React

import * as React from 'react';

import { Provider } from 'mobx-react';
import LocaleStore, { LOCALES } from 'oto-locale';

export default class App extends React.Component<any, null>{
    localeStore: LocaleStore;
    constructor(props) {
        super(props);
        const supportedLocales: LOCALES[] = [LOCALES.ENGLISH, LOCALES.SPANISH, LOCALES.FRENCH]; 
        this.localeStore = new LocaleStore({ supportedLocales });
    }

    render() {
        return (
            <Provider localeStore={this.localeStore}>
                Put application components here, using mobx @inject to access localeStore
            </Provider>
        );
    }   

}