Comment formater son texte sur des composants React

Si vous faîtes du frontend ReactJS, il est fort probable d'avoir du code qui ressemble à ceci :

<div className="flex flex-col items-center w-full px-20 mt-20">
      <div className="flex items-center pb-8">
        {Object.keys(totalSell).map((currency: string) => {
          return (
            <Badge
              key={currency}
              color={
                totalSell[currency] - totalBuy[currency] > 0 ? "green" : "red"
              }
              title={`Total Buy: ${totalBuy[currency].toFixed(2)} - 
              Total Sell: ${totalSell[currency].toFixed(2)}`}
              className="text-3xl"
            >
              {currency}:{" "}
              {(totalSell[currency] - totalBuy[currency]).toFixed(2)}
            </Badge>
          );
        })}
      </div>

Fonctionnellement tout est OK, ce composant s'affiche bien etc.

Mais vous ne trouvez pas cela perturbant d'avoir autant de balise dans une partie qui est sensé être composé que de strings ? 🤔

Lorsque je vois ça, il me faut un peut plus de temps pour me projeter sur ce à quoi cela peut ressembler au rendu. Aussi, je me dis que le code pourrait être bien plus lisible et structuré pour nos collègues. 💡

Quelque chose qui ressemble à ceci par exemple :

<div className="flex items-center pb-8">
        {Object.keys(totalSell).map((currency: string) => {
          return (
            <Badge
              key={currency}
              color={
                totalSell[currency] - totalBuy[currency] > 0 ? "green" : "red"
              }
              title={new TextFormatter(
                `Total Buy: %totalBuy% - Total Sell: %totalSell%`
              ).format({
                totalBuy: totalBuy[currency].toFixed(2),
                totalSell: totalSell[currency].toFixed(2),
              })}
              className="text-3xl"
            >
              {new TextFormatter(`%currency%: %balance%`).format({
                currency,
                balance: (totalSell[currency] - totalBuy[currency]).toFixed(2),
              })}
            </Badge>
          );
        })}
      </div>

Et pour arriver à ce résultat, je vais créer une classe TextFormatter comme ceci :

class TextFormatter {
  text: string;

  constructor(text: string) {
    this.text = text;
  }

  toString() {
    return this.text;
  }

  format(
    obj: Record<string, string | number>,
    options = { openTag: "%", closeTag: "%" }
  ) {
    let result = this.text;
    for (let key of Object.keys(obj)) {
      result = result.replace(
        new RegExp(`${options.openTag}${key}${options.closeTag}`, "g"),
        obj[key].toString()
      );
    }
    return result;
  }
}

export default TextFormatter;

Vous pouvez personnaliser les tags sur la méthode format en second paramètre :

new TextFormatter(`{{currency}}: {{balance}}`).format({
  currency,
  balance: (totalSell[currency] - totalBuy[currency]).toFixed(2),
}, { openTag: '{{', closeTag: '}}' })

Je ne vous cache pas que je garde tout de même, une préférence pour un texte sans brackets, donc j'éviterai de l'utiliser sous cette forme.

Voilà je pense qu'avec cela, vous serez en mesure de faire du texte plus lisible dans vos composants React. 😉

Bon code à vous !