dynamic-i18n-io

    1.0.2 • Public • Published

    Dynamic i18n

    For a statistics/analytics dasboard we needed a bit more advanced and customizable localization tool. Couldn't find what we needed actually so I build it

    Basically this is a string interpolation tool which fill the placeholders with data on the fly based on certain condition and values.

    Notification example

     
    // fetched or static data
    const data = {
      message_count: 2,
    };
     
    // en.js
    export default {
      message_count: {
        // the placeholders {n} are linked to the options
        // so {0} links to options[0] ...
        template: `You have {0} unread {1}`,
     
        // the array items in the options are linked
        // to the array items in the conditions array
        options: [ 
          ['{0}', 'no'],
          ['messages', 'message']
        ],
        
        // the conditions determine the options to show
        // so if condition[0] is true
        // the options[0][0] will be shown else options[0][1]
        
        // a condition could also be just true, then you can
        // have just one array item for the relative options[index]
        // e.g.: options[0] should always display the number of
        // message_counts then instead of having a callback
        // conditions[0] = true will be enough
        conditions: [
            (message_count) => message_count > 1 || message_count === 1,
            (message_count) => message_count > 1 || message_count === 0,
        ]
      }
    };
     
    const localizedData = i18n(data, format);
     
    // data = { message_count: 0 }
    // > 'You have no messages'
     
    // data = { message_count: 1 }
    // > 'You have 1 message'
     
    // data = { message_count: 2 } or up
    // > 'You have 2 messages'
     

    Greeting example

     
    // fetched or static data
    const data = {
      greeting: {
        isMale: true,
        name:   'Joe',
        age:    42
      },
    };
     
    // en.js
    const format = {
      greeting: {
        template: `Hello {isMale} {name} {age}`,
        options: {
          isMale: ['Sir', 'Madam'],
          name:   ['{name}', ''],
          age:    ['({age})', '']
        },
        conditions: {
          isMale: (props) => props.isMale,
          name:   true,
          age:    (props) => props.isMale || props.age < 20,
        }
      }
    };
     
    const localizedData = i18n(data, format);
     
    // data = { isMale: true, name: 'Joe', age: 42 }
    // > 'Hello Sir Joe (42)'
     
    // data = { isMale: false, name: 'Joelle', age: 42 }
    // > 'Hello Madam Joelle'
     
    // data = { isMale: false, name: 'Joelle', age: 18 }
    // > 'Hello Madam Joelle (18)'
     

    Install

    npm i dynamic-i18n-io

    DownloadsWeekly Downloads

    16

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    7.13 kB

    Total Files

    4

    Last publish

    Collaborators

    • isaozler