DEV Community

Cover image for Conditional {i18n}
Isa Ozler
Isa Ozler

Posted on

2 1

Conditional {i18n}

For a statistics/analytics dashboard we needed a bit more advanced and customizable localization tool. Due to restriction of external packages, I had to create one :D (Github link / Try it out!)

Basically this is a string interpolation tool which fill the placeholders with data on the fly.

I think what makes this tool nice is that you can have conditional outputs.

Basic example


import i18n from 'dynamic-i18n-io';

// some data
const data = {
  greeting: {
    isMale: true,
    name:   'Joe',
    age:    42
  },
};

// en.js
const format = {
  greeting: {
    // template contains the placeholders text
    template:   `Hello {isMale} {name} {age}`,

    // options is where you put all your values / refs
    // so if
    // greeting.options.name === true ? data.greeting.name
    // will be set to the {name} in the greeting.template literal
    options: {
      isMale: ['Sir', 'Madam'],
      name:   ['{name}', ''],
      age:    ['({age})', '']
    },

    // when condition returns true options[key][0] is set
    // otherwise options[key][1]
    // you can add logic to determine selection with a callback
    conditions: {
      isMale: (props) => props.isMale,
      name:   true,
      age:    (props) => props.isMale || props.age < 20,
    }
  }
};

const { greeting } = 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)'

Feel free to fork and improve based on your needs!

Or try it out!

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more