# Internationalization Support (i18n)

Crayons comes with i18n support using @freshworks/crayons-i18n package.

This provides:

  • User language detection
  • Proper pluralizations
  • Translation context
  • Nesting of keys, Interpolation (variable replacement)

Based on the lang attribute on the html element, the translation gets applied. Whenever the lang attribute changes, the corresponding strings of that lang will be used.

To overwrite the existing translations or to add any new translations, you can use setTranslations method in TranslationController.

To use with applications using crayons

javascript: import { TranslationController } from "@freshworks/crayons";
react: import { TranslationController } from "@freshworks/crayons/react";

TranslationController.setTranslations({
    //en :{...custom translation object},
    //de :{...custom translation object},
})

# setLang

You can also set language manually by using TranslationController.setLang(<<pass lang here>>) method. Once the lang is set, the components will show the appropriate localised content.

# Usage in a stencil project

If any of your stencil project needs i18n capabilities, you can use crayons-i18n package like below:

// translation.js
import { TranslationController as controller } from "@freshworks/crayons-i18n";
export const TranslationController = new controller(); // create a singleton instance and share it across the app.

// usage
import { TranslationController } from "./translation"

// set lang manually
TranslationController.setLang("en");

TranslationController.setTranslations({
    //en :{...custom translation object},
    //de :{...custom translation object},
})

To know about the translation keys that should be used in the translation object you can check here

# Translation Keys

Translation key and value for EN lang.

{
  "datepicker": {
    "cancel": "Cancel",
    "update": "Update",
    "to": "to"
  },
  "dropdown": {
    "add": "Add",
    "cancel": "Cancel"
  },
  "fileUploader": {
    "text": "Upload file",
    "description": "or drag and drop here",
    "acceptError": "File format not accepted",
    "maxFileSizeError": "Exceeded maximum file size",
    "maxFilesLimitError": "Exceeding maximum files limit",
    "fileUploadError": "File upload failed",
    "uploading": "Uploading",
    "selectedFiles": "Selected files",
    "remove": "remove"
  },
  "modal": {
    "cancel": "Cancel",
    "ok": "OK"
  },
  "search": {
    "search": "Search",
    "noItemsFound": "No items found",
    "noDataAvailable": "No data available"
  },
  "form": {
    "required": "{{field}} is required",
    "invalidUrl": "Enter a valid URL",
    "invalidEmail": "Enter a valid email",
    "invalidNumber": "Enter a valid number"
  },
  "pagination": {
    "buttonGroupLabel": "Pagination controls",
    "previousButtonLabel": "Previous",
    "nextButtonLabel": "Next",
    "content": "<span class='record'>{{start}}</span> to <span class='record'>{{end}}</span> of {{total}}"
  },
  "datatable": {
    "chooseColumns": "Choose columns",
    "actions": "Actions"
  }
}

# Interpolation

Interpolation is one of the most used functionalities in i18n.

Keys, by default, are strings surrounded by curly brackets:

{
    "key": "hello {{world}}"
}
TranslationController.t('key', { world: 'great' });
// -> "hello world"

# Examples

# HTMl

Show Code

# React

undefined
Show Code
Last Updated: 3/21/2022, 5:32:10 PM