Formatage des temps relatifs

Problème

Une application affiche un horodatage comme « Publié il y a 2 jours ». Bien que cela soit clair en anglais, la logique et la grammaire pour « il y a 2 jours » par rapport à « dans 2 jours » (passé vs futur) diffèrent considérablement d'une langue à l'autre. Une simple concaténation de chaînes (par exemple, « 2 » + « » + « jours ») ne parvient pas à produire un résultat grammaticalement correct.

Solution

Utilisez un composant dédié comme FormattedRelativeTime de react-intl. Ce composant prend une valeur numérique (par exemple, -2) et une unité (par exemple, « day »), et la formate automatiquement en une chaîne grammaticalement correcte et adaptée à la locale, telle que « il y a 2 jours », « hace 2 días » ou « gestern » (hier).

Étapes

1. Créer un composant client pour le temps relatif

Le composant FormattedRelativeTime doit être utilisé à l'intérieur d'un composant client.

Créez un nouveau fichier app/components/RelativeTime.tsx.

// app/components/RelativeTime.tsx
'use client';

import { FormattedRelativeTime } from 'react-intl';

type Props = {
  value: number;
  unit: Intl.RelativeTimeFormatUnit;
};

export default function RelativeTime({ value, unit }: Props) {
  return (
    <FormattedRelativeTime
      value={value}
      unit={unit}
      numeric="auto" // "auto" allows "yesterday" or "tomorrow"
      style="long"
    />
  );
}

2. Passer les options de formatage

Le composant FormattedRelativeTime accepte plusieurs props clés :

• value : le nombre d'unités. Une valeur négative (par exemple, -2) indique le passé (« il y a 2 jours »), et une valeur positive (2) indique le futur (« dans 2 jours »).
• unit : l'unité de temps, telle que « day », « hour », « minute » ou « second ».
• numeric="auto" : cela permet à la bibliothèque d'utiliser des mots comme « hier » ou « demain » au lieu de « il y a 1 jour » ou « dans 1 jour ».

3. Utiliser le composant sur une page

Vous pouvez maintenant utiliser ce composant sur n'importe quelle page. Vous êtes responsable du calcul de la différence de temps avant de passer les props.

// app/[lang]/page.tsx
import RelativeTime from '@/app/components/RelativeTime';

export default function Home() {
  // You would calculate these values dynamically
  const daysSinceUpdate = -2;
  const hoursUntilEvent = 3;

  return (
    <div>
      <h1>Updates</h1>
      <p>
        File updated: <RelativeTime value={daysSinceUpdate} unit="day" />
      </p>
      <p>
        Event starts: <RelativeTime value={hoursUntilEvent} unit="hour" />
      </p>
    </div>
  );
}

Un utilisateur visitant /en verra "File updated: 2 days ago" et "Event starts: in 3 hours". Un utilisateur visitant /es verra "File updated: hace 2 días" et "Event starts: dentro de 3 horas".