withI18n function #

The withI18n function extends a component and makes working with internationalization (i18n) easier in components.

// import it with all other features
import { createCustomElement, withI18n } from 'https://cdn.skypack.dev/ficusjs@3'

// alternatively, import the function directly
// import { withI18n } from 'https://cdn.skypack.dev/ficusjs@3/with-i18n'

// import the renderer and html tagged template literal from the uhtml renderer
import { html, renderer } from 'https://cdn.skypack.dev/@ficusjs/renderers@3/uhtml'

// import an I18n instance from a local file
import { i18n } from './i18n.js'

withI18n(i18n, {
buttonClicked () {
// handle event
render () {
return html`<button type="button" onclick=${this.buttonClicked}>${this.i18n.t('buttons.increment')}</button>`

The withI18n function provides a this.i18n property within the component.
The following methods are available within the component on this..i18n.

t(key, templateData, options) #

The t() method retrieves the translation message for the current locale.
The following arguments can be passed to the t() method.

keystringYesThe key for the specific message. This can be a nested key like buttons.increment
templateDataobjectThe optional data for message interpolation. The keys must match the message value. For example; the message Greeting requires a templateData object containing { name: 'FicuJS' }
optionsobjectAn optional set of options for the message translation

getLocale() #

The getLocale() method gets the current locale of the i18n instance.

setI18n method #

The setI18n() method can be called when an instance needs to be set after the component has initialised.
The method accepts an i18n argument which is a single I18n instance.

someMethod () {
const i18n = getI18n()