Nearly-Pickled Module

    xl-react-localization
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published

    react-localization

    Simple module to localize the React interface using the same syntax used in the ReactNativeLocalization module.

    How it works

    The library uses the current interface language, then it loads and displays the strings matching the current interface locale or the default language (the first one if a match is not found) if a specific localization can't be found.

    It's possible to force a language different from the interface one.

    Installation

    npm install --save react-localization

    Usage

    In the React class that you want to localize require the library and define the strings object passing to the constructor a simple object containing a language key (i.e. en, it, fr..) and then a list of key-value pairs with the needed localized strings.

    \\ES6 module syntax
    import LocalizedStrings from 'react-localization';
     
    let strings = new LocalizedStrings({
     en:{
       how:"How do you want your egg today?",
       boiledEgg:"Boiled egg",
       softBoiledEgg:"Soft-boiled egg",
       choice:"How to choose the egg"
     },
     it: {
       how:"Come vuoi il tuo uovo oggi?",
       boiledEgg:"Uovo sodo",
       softBoiledEgg:"Uovo alla coque",
       choice:"Come scegliere l'uovo"
     }
    });

    Then use the strings object literal directly in the render method accessing the key of the localized string.

    <Text style={styles.title}>
      {strings.how}
    </Text>

    API

    • setLanguage(languageCode) - to force manually a particular language
    • getLanguage() - to get the current displayed language
    • getInterfaceLanguage() - to get the current device interface language
    • formatString() - to format the passed string replacing its placeholders with the other arguments strings
      en:{
        bread:"bread",
        butter:"butter",
        question:"I'd like {0} and {1}, or just {0}"
        ...
        login: 'login',
        onlyForMembers: 'You have to {0} in order to use our app',
        bold: 'bold',
        iAmText: 'I am {0} text',
      }
      ...
      strings.formatString(strings.question, strings.bread, strings.butter)
     
      // you can also use React component as placeholder values! Useful when using links or customizing style
      strings.formatString(strings.onlyForMembers, <a href="http://login.com">{strings.login}</a>)
      strings.formatString(strings.iAmText, <b>{strings.bold}</b>)

    Beware: do not define a string key as formatString!

    • setContent(props) - to dynamically load another set of strings
    • getAvailableLanguages() - to get an array of the languages passed in the constructor

    Examples

    To force a particular language use something like this:

    _onSetLanguageToItalian() {
      strings.setLanguage('it');
      this.setState({});
    }

    Questions or suggestions?

    Feel free to contact me on Twitter or open an issue.

    Install

    npm i xl-react-localization

    DownloadsWeekly Downloads

    1

    Version

    0.0.1

    License

    MIT

    Last publish

    Collaborators

    • bogdannechyporenko