Passer au contenu principal

intlMessageShape

La plate-forme Jutro propose le type personnalisé intlMessageShape.

Essentiellement, il est défini de la façon suivante :

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

Il accepte donc des valeurs de type string ou de type intlMessageObject.

intlMessageObject est défini de la façon suivante :

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

Un grand nombre de nos composants intégrés permettent de définir des propriétés qui sont affichées sous la forme de texte d'interface utilisateur. C'est par exemple le cas du texte qui pourrait apparaître sur un composant Button.

Toutes ces propriétés sont de type intlMessageShape. À ce titre, vous pouvez attribuer des valeurs en utilisant des chaînes brutes ou des objets intlMessageObject.

Note : Ceci s'applique également aux propriétés to et href dans un certain nombre de composants, comme Link. C'est-à-dire que les liens eux-mêmes sont traduisibles. Cette fonctionnalité est nécessaire lorsque des ressources spécifiques à une langue sont liées.

Toutefois, si vous utilisez des chaînes brutes pour définir ces propriétés, ces chaînes d'interface utilisateur ne seront pas traduisibles. Pour qu'une chaîne d'interface utilisateur soit traduisible, elle doit être de type intlMessageObject.

Nous vous recommandons vivement d'utiliser le type intlMessageObject. Même si vous n'avez pas l'intention de traduire votre application immédiatement, l'utilisation du type intlMessageObject vous permettra de le faire ultérieurement.

De même, si vous créez vos propres composants personnalisés, assurez-vous d'utiliser le type intlMessageShape, le cas échéant. Cela permettra aux utilisateurs de votre composant de créer des chaînes d'interface utilisateur traduisibles.

Exemple JS/JSX​

Pour définir des chaînes d'interface utilisateur à utiliser dans un composant JSX :

  1. Créez un fichier MyComponent.messages.js, comme :

    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. Dans votre composant JSX, importez et utilisez ces messages.

Identifiants​

ID en double​

La valeur de la propriété id peut être dupliquée au sein du même fichier. Cependant, la valeur defaultMessage associée à la déclaration finale de id correspond à ce qui sera extrait.

Assurez-vous que les valeurs id sont uniques dans tous les fichiers. Si l'une d'entre elles se répète, une erreur sera générée au moment de la compilation.

Lectures complémentaires​

Consultez la documentation relative à l'internationalisation et à la localisation pour obtenir une explication détaillée sur la façon dont ces chaînes sont extraites, puis traduites.

On this page