intlMessageShape

The Jutro platform has the custom type intlMessageShape.

Essentially, it is defined as:

intlMessageShape = PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.shape(intlMessageObject)
  ]
)

That is, it accepts values either of type string or of type intlMessageObject.

intlMessageObject is defined as:

{
  id?: string;
  defaultMessage?: string;
  args?: Record<string, string>
}

Many of our built-in components allow properties to be set that are rendered as UI text. For example, the text that might appear on a Button component.

All such properties are of type intlMessageShape. As such, you can assign values using raw strings, or intlMessageObject objects.

Note: this also applies to the to and href properties in a number of components, like Link. That is, the links themselves are translatable. Such functionality is required when language specific resources are being linked to.

However, if you use raw strings to set these properties, then those UI strings will not be translatable. For a UI string to be translatable, it must be of type intlMessageObject.

We strongly recommend that the intlMessageObject type be used. Though you may not intend on translating your application now, using the type intlMessageObject will future-proof it.

Similarly, if creating your own custom components, where appropriate make sure to use the intlMessageShape type. This will allow consumers of your component to author UI strings that are translatable.

JS / JSX Example

To define UI strings for use in a JSX component:

1. Create a MyComponent.messages.js file, like:

   import { defineMessages } from '@jutro/locale';
   export default defineMessages({
     loggedInAs: {
       id: 'jutro-app.pages.AuthPage.LoggedInAs',
       defaultMessage: 'Logged in as: {name}',
       description: 'Message to display the currently logged in user'
       },
       notLoggedIn: {
         id: 'jutro-app.pages.AuthPage.NotLoggedIn.',
         defaultMessage: 'Not logged in.',
         description: 'Message to tell the user they are not logged in'
       }
   })

2. In your JSX component import and use these messages

Identifiers

Duplicate IDs

The value of the id property can be duplicated within the same file. However the defaultMessage value associated with final declaration of the id is what will be extracted.

Make sure id values are unique across files. If any of them repeat, you will get a build time error.

Further reading

See the Internationalization & Localization documentation for a detailed explanation on how these strings are extracted and subsequently translated.