Formatage des messages

18ways utilise waysParser par défaut. Ce parseur est ce qui vous permet de garder la copie source lisible tout en gérant les variables et le formatage sensible à la locale.

Variables

Utilisez des accolades pour les variables et passez les valeurs via vars.

'use client';
 
import { T } from '@18ways/react';
 
export function WelcomeMessage() {
  return (
    <T vars={{ name: 'Ada' }}>
      Hello {name}
    </T>
  );
}

Pluralisation

Utilisez des blocs de pluriel au style ICU lorsque la phrase change réellement de forme.

import { T } from '@18ways/react';
 
export function InboxCount({
  count,
}: {
  count: number;
}) {
  return (
    <T vars={{ count }}>
      {
        '{count, plural, =0{No messages} =1{One message} other{{count} messages}}'
      }
    </T>
  );
}

Dates et argent

Si vous passez un véritable Date ou un objet semblable à de l'argent avec amount et currency, 18ways le formattera automatiquement même avec un simple espace réservé comme {publishedAt} ou {renewalTotal}.

Utilisez le formatteur explicite uniquement lorsque vous souhaitez contrôler la sortie, comme dateStyle:long ou un diviseur monétaire personnalisé.

'use client';
 
import { T } from '@18ways/react';
 
export function BillingSummary() {
  const publishedAt = new Date(
    '2026-03-14T09:00:00Z'
  );
  const renewalTotal = {
    amount: 1900,
    currency: 'USD',
  };
 
  return (
    <>
      <p>
        <T vars={{ publishedAt }}>
          Last updated {publishedAt}
        </T>
      </p>
      <p>
        <T vars={{ renewalTotal }}>
          Renewal total {renewalTotal}
        </T>
      </p>
      <p>
        <T vars={{ publishedAt }}>
          {
            'Detailed date: {publishedAt, date, dateStyle:long}'
          }
        </T>
      </p>
    </>
  );
}

Par défaut, les montants d'argent sont traités comme des unités mineures. Si vous avez déjà des unités majeures, utilisez le formateur d'argent explicite avec divisor: 1.

Blocs de sélection

Utilisez select lorsque la copie dépend d'un petit ensemble de valeurs discrètes.

import { T } from '@18ways/react';
 
export function SignInState({
  isSignedIn,
}: {
  isSignedIn: boolean;
}) {
  return (
    <T vars={{ isSignedIn, name: 'Ada' }}>
      {
        '{isSignedIn, select, true{Welcome back, {name}} false{Sign in to continue} other{Sign in to continue}}'
      }
    </T>
  );
}

Composition des composants

Gardez la phrase ensemble dans JSX et 18ways préservera la véritable structure de l'interface utilisateur pour les cas courants comme <T><a href="#">Cliquez ici</a> pour voir plus</T> sans que vous ayez à assembler des fragments à la main.

'use client';
 
import Link from 'next/link';
import { T } from '@18ways/react';
 
export function HeroCta() {
  return (
    <T>
      <Link href="/pricing">Click here</Link> to
      see more
    </T>
  );
}

Désactiver le parseur

@18ways/react vous permet de définir messageFormatter="none" à la racine ou de fournir une fonction de formatage personnalisée. C'est une échappatoire avancée, pas le chemin par défaut.

Règle pratique

Si la phrase peut être écrite comme une phrase complète avec quelques variables, gardez-la dans un seul message. Cela améliore considérablement la qualité de la traduction par rapport à l'assemblage de fragments dans le code.