|Labs
Réserver une démoPlateforme
React (Lingo Compiler)
Alpha
React (MCP)React (i18n)
CLI historique (v0)
Déconseillé

Vue d'ensemble

  • @lingo.dev/react

Premiers pas

  • Démarrage rapide

Référence

  • LingoProvider
  • useLingo
  • Pluriels et select
  • Formatage

Formatage

Chaque instance de Lingo embarque un ensemble de méthodes de formatage liées à la langue active. Ce sont de fines surcouches autour des API natives Intl.* — aucun poids supplémentaire dans le bundle, aucune convention imposée au-delà de la chaîne de langue que vous avez déjà fournie à LingoProvider.

Toutes les méthodes sont pures : à entrée et langue identiques, la sortie est toujours la même. Vous pouvez les appeler dans le rendu sans mémoïsation.

Nombres#

l.num(value, options?)#

Formate un nombre avec des séparateurs et des décimales adaptés à la langue.

tsx
l.num(1234567);       // "1,234,567" (en) / "1.234.567" (de) / "1 234 567" (fr)
l.num(3.14159, { maximumFractionDigits: 2 }); // "3.14" (en) / "3,14" (de)

options est transmis à Intl.NumberFormat.

l.currency(value, code, options?)#

tsx
l.currency(29.99, "USD");   // "$29.99" (en) / "29,99 $US" (fr)
l.currency(29.99, "EUR");   // "€29.99" (en) / "29,99 €" (de)

l.percent(value, options?)#

Passez une valeur décimale (0.156, pas 15.6).

tsx
l.percent(0.156);                           // "16%" (en) / "16 %" (fr)
l.percent(0.156, { maximumFractionDigits: 1 }); // "15.6%"

l.unit(value, unit, options?)#

unit est un nom d’unité reconnu par Intl (celsius, kilometer-per-hour, megabyte, etc.).

tsx
l.unit(32, "celsius");        // "32°C" (en) / "32 °C" (de)
l.unit(120, "kilometer-per-hour"); // "120 km/h"

l.compact(value, options?)#

tsx
l.compact(1234567);    // "1.2M" (en) / "123万" (ja) / "1,2 Mio." (de)
l.compact(950);        // "950"

Dates et heures#

l.date(value, options?) / l.time / l.datetime#

Accepte un Date ou des millisecondes Unix.

tsx
l.date(new Date());     // "3/16/2026" (en) / "16.03.2026" (de)
l.time(new Date());     // "3:45 PM" (en) / "15:45" (de)
l.datetime(new Date()); // "3/16/2026, 3:45 PM" (en)

l.date(now, { dateStyle: "long" });   // "March 16, 2026"
l.date(now, { weekday: "short", month: "short", day: "numeric" }); // "Mon, Mar 16"

l.relative(value, unit, options?)#

Décalage signé — négatif pour le passé, positif pour le futur.

tsx
l.relative(-3, "day");       // "3 days ago" (en) / "vor 3 Tagen" (de)
l.relative(2, "hour");       // "in 2 hours"
l.relative(0, "second", { numeric: "auto" }); // "now"

Listes#

l.list(items, options?)#

Conjonction adaptée à la langue. Le style par défaut est long avec le type conjunction ("and").

tsx
l.list(["apples", "oranges", "pears"]); // "apples, oranges, and pears" (en)
                                         // "apples, oranges y pears" (es)
l.list(["red", "blue"], { type: "disjunction" }); // "red or blue"

Tailles de fichier#

l.fileSize(bytes)#

Surcouche pratique qui choisit l’unité appropriée (B, KB, MB, GB, TB, PB) et formate le résultat avec des décimales adaptées à la langue.

tsx
l.fileSize(1024);          // "1 KB"
l.fileSize(1073741824);    // "1 GB" (en) / "1 Go" (fr)
l.fileSize(1536);          // "1.5 KB"

Noms d’affichage#

l.displayName(code, type)#

Traduit un code de langue, de région, de script ou de devise en nom localisé.

tsx
l.displayName("en", "language");  // "English" (en) / "Englisch" (de) / "Английский" (ru)
l.displayName("US", "region");    // "United States" / "Vereinigte Staaten"
l.displayName("USD", "currency"); // "US Dollar" / "US-Dollar"
l.displayName("Cyrl", "script");  // "Cyrillic" / "Kyrillisch"

Renvoie undefined si le code n’est pas reconnu pour le type demandé.

Collation#

l.sort(items, options?)#

Renvoie un nouveau tableau trié — sans modifier l’entrée.

tsx
l.sort(["ä", "z", "a"]);   // de: ["a", "ä", "z"]   sv: ["a", "z", "ä"]
l.sort(["File 10", "File 2"], { numeric: true }); // ["File 2", "File 10"]

Segmentation#

l.segment(text, granularity?)#

Découpage adapté à la langue en graphèmes, mots ou phrases. Indispensable pour les langues CJK, où les espaces ne séparent pas les mots.

tsx
l.segment("Hello world", "word");  // ["Hello", " ", "world"]
l.segment("こんにちは世界", "word"); // ["こんにちは", "世界"]   (ja)
l.segment("café", "grapheme");     // ["c", "a", "f", "é"]

La granularité par défaut est "grapheme".

Pourquoi de fines surcouches ?#

Chaque méthode délègue à un formateur natif Intl — pas de parsing, pas de bibliothèque de nombres, pas de dépendance supplémentaire. Le runtime garde le bundle léger et laisse la plateforme gérer les données de langue, ce qui permet aux nouvelles langues ajoutées aux tables ICU de V8 / SpiderMonkey de fonctionner automatiquement.

La seule valeur ajoutée par rapport à Intl brut, c’est la chaîne de langue : vous la définissez une fois via <LingoProvider locale="...">, puis chaque formateur la récupère automatiquement. Si vous préférez utiliser Intl brut (pour du code en dehors de React), createLingo(locale) vous donne le même objet sans le provider.

Pour aller plus loin#

  • useLingo — traduire des chaînes via l.text et l.rich.
  • Plurals and select — choisir la bonne forme selon le nombre ou la catégorie.

Cette page vous a-t-elle été utile ?

Max PrilutskiyMax Prilutskiy·Mis à jour il y a environ 1 mois·3 min de lecture