Skip to main content

Localization

This service provides helpers to translate strings on the Rhapsody platform.

This localization is using FormatJs under the hood, you can check their documentation if you can't find what you need.

Components​

I18nProvider​

This is a react component that creates a localization context. It allows you to configure settings such as the current locale as well as the set of translated strings/messages to be provided at the root of a component tree and made available to the <Formatted*> components.

NOTE: It's imperative to have this in the root of your app to be able to use the other components

import { I18nProvider } from '@rhapsody/localization'

export const App = () => {
  return <I18nProvider>Here is where the magic happens!</I18nProvider>
}

intl object​

This is the instance to store a cache of all Intl.* APIs, configurations, compiled messages and such.

import { I18nProvider, intl } from '@rhapsody/localization'

const awesomeMessage = intl.formatMessage({
  defaultMessage: 'Welcome!',
  description:
    'This is the welcome message displayed to a user when the users lands in the dashboard',
})

export const App = () => {
  return (
    <I18nProvider>
      Here is where the magic happens!
      {awesomeMessage}
    </I18nProvider>
  )
}

FormattedMessage​

This component uses the formatMessage API and has props that correspond to a Message Descriptor

import { FormattedMessage } from 'react-intl'
import { I18nProvider } from '@rhapsody/localization'

export const App = () => {
  return (
    <I18nProvider>
      <FormattedMessage
        description="This is the welcome message displayed to a user when the users lands in the dashboard"
        defaultMessage="Here is where the magic happens!"
      />
    </I18nProvider>
  )
}

As you can see on the example above, the FormattedMessage message is being imported from the react-intl package.