Les articles de votre blog ici ? Inscrivez votre blog !

Créez des composants React réactifs avec React Textfit

Publié le 12 octobre 2021 par Mycamer

Le développement dans React implique de définir des composants réutilisables et de les assembler dans différentes parties de votre application pour obtenir l’interface utilisateur (UI) souhaitée. Dans cet article, nous examinerons les react-textfit bibliothèque, ce qui facilite la création de composants React réactifs qui s’affichent de manière prévisible partout où ils apparaissent dans une mise en page.

Le problème de l’ajustement du texte

Étant donné que les composants React sont des morceaux de code JavaScript décrivant une section particulière de votre interface utilisateur, ils sont pratiquement indépendants les uns des autres. Et leurs styles visuels y sont souvent intégrés, dans le cadre de leur définition. Cela peut être très utile, étant donné qu’ils sont susceptibles d’être utilisés dans différents emplacements et mises en page.

Mais il y a aussi des inconvénients à intégrer des styles dans un composant réutilisable. Un exemple est vu dans le cas de la réactivité. Supposons que vous vouliez qu’une ligne de texte – comme un titre – remplisse complètement l’espace qui lui est réservé en termes de hauteur et de largeur, mais pas de retour à la ligne – le tout sans avoir à écrire des règles CSS personnalisées pour chaque situation possible. (Par exemple, les slogans commerciaux, les messages publicitaires ou le texte intégré dans les composants de la barre de navigation sont des exemples d’endroits où vous pouvez le souhaiter.)

CSS et portabilité

Lors de la définition du style de votre composant React réactif, vous devez prendre en compte la taille, la disposition ou le style de chaque composant parent possible qui pourrait l’envelopper pour adapter la taille de la police en conséquence. Comme vous pouvez l’imaginer, prendre en compte toutes les tailles de conteneurs possibles n’est pas vraiment viable, même si vous pouviez le faire avec CSS. Vous auriez couru beaucoup trop de scénarios de fenêtre d’affichage pour qu’il soit pratique d’écrire des requêtes multimédias. Mais à part les media queries, il n’y a pas vraiment de moyen en CSS de s’assurer qu’un bloc de texte tiendra toujours dans une seule ligne.

Créer des composants React réutilisables

Heureusement, certaines bibliothèques React peuvent être utilisées pour résoudre ce problème sans effort. Ils vous permettent de définir des composants React réutilisables où le texte se comporte comme prévu, quel que soit le conteneur dans lequel le composant réutilisable est placé. À la fin de cet article, vous serez en mesure d’utiliser ces bibliothèques pour résoudre le problème d’ajustement de texte susmentionné et faire un composant réutilisable. Voyons donc tout ce que vous devez savoir pour que votre texte s’adapte automatiquement à l’espace disponible dans React.

Tout d’abord, nous verrons pourquoi faire face à un tel problème est si important et pourquoi les solutions communes peuvent ne pas suffire, en particulier lors de l’utilisation de React. Puis le react-textfit La bibliothèque React sera présentée et utilisée pour implémenter une solution pour le texte à une ou plusieurs lignes.

Problème d’ajustement du texte dans les composants réutilisables

Jetons un coup d’œil à la démo suivante expliquant le problème d’ajustement du texte avec un exemple.

Voir le stylo
Problème d’ajustement du texte par SitePoint (@PointSite)
au Stylo de code.

Le but est de faire tenir un titre dans l’espace qui lui est réservé, quelle que soit la taille de l’écran de l’utilisateur. Dans cet exemple, unités de fenêtre sont utilisés pour définir le font-size pour le titre. Par conséquent, tout en redimensionnant la bordure rouge iframe représentant l’écran de l’utilisateur, le titre correspondra toujours à son parent <div>. Cette méthode permet donc certainement au texte du titre de s’adapter à n’importe quelle largeur d’écran. Cependant, le Headline le composant stylisé n’est pas réutilisable. C’est parce qu’il est conçu avec uniquement ce texte particulier à l’esprit. En ajoutant au texte du titre ou en redimensionnant le parent <div>, le texte ne tiendra plus sur une seule ligne. (Vous pouvez essayer de changer le texte dans la démo.) Nous voulons vraiment qu’un composant réutilisable soit plus adaptable que celui-ci.

Comme mentionné, une autre solution est offerte par Requêtes média CSS, qui vous permettent d’adapter la taille de la police de votre texte en fonction de la taille de l’écran. C’est la solution idéale lorsque l’on considère la page Web dans son ensemble. Mais il n’est pas pratique de rechercher un nombre infini de largeurs de conteneurs possibles avec des requêtes multimédias. Cela entraînerait beaucoup de travail. De plus, et rendrait vos composants beaucoup moins portables.

react-textfit comme solution pour un texte réactif réactif

Voyons donc comment le react-textfit La bibliothèque React permet d’ajuster automatiquement le texte dans l’espace disponible, rendant véritablement le composant réutilisable.

Voir le stylo
Problème d’ajustement du texte avec react-textfit par SitePoint (@PointSite)
au Stylo de code.

Comme vous pouvez le voir, les problèmes susmentionnés ont. Grâce à react-textfit, vous pouvez maintenant changer le titre ou redimensionner le parent <div>, tout en gardant votre titre parfaitement adapté à l’espace disponible.

Comment Textfit travaux

Voyons maintenant en détail comment react-textfit travaux.

Comme indiqué dans la page GitHub officielle du projet, react-textfit est une bibliothèque pour insérer des titres et des paragraphes dans tous les composants réutilisables. Il trouve efficacement le bon ajustement et fonctionne avec n’importe quelle configuration de style CSS, telle que padding, line-height, etc.

Vous pouvez l’ajouter à vos dépendances en lançant la commande suivante : 

npm install react-textfit --save

Vous pourrez alors accéder au Textfit composant pour s’adapter à n’importe quel texte, comme suit : 

import { Textfit } from 'react-textfit';

Textfit sera traduit en un <div> élément HTML et vous permet d’insérer à la fois du texte sur une seule ligne et sur plusieurs lignes dans n’importe quel composant réutilisable ou élément HTML.

Pour l’utiliser, vous ne faites qu’envelopper le texte, comme suit :

<Textfit>
  Sample text
</Textfit>

Ou tout élément HTML contenant, comme suit :

<Textfit>
  <span>Sample text</span>
</Textfit>

Depuis Textfit est un <div>, vous pouvez lui transmettre des règles CSS via React style prop, comme suit :

<Textfit
  style={{"width": "200px"}}
>
  Sample text
</Textfit>

Ou en l’affectant à une classe CSS via className, comme suit:

<Textfit
  className={"divWidth200"}
>
  Sample text
</Textfit>

Accessoires Textfit

Textfit est également livré avec quelques accessoires qui peuvent être utilisés pour adapter votre texte comme vous le souhaitez. Voyons-les tous :

  • mode est une chaîne qui peut prendre deux valeurs : single ou multi. Il définit la méthode utilisée par le composant pour ajuster le texte. Les single doit être utilisé pour les titres, et le multi mode pour les paragraphes. La valeur par défaut est multi.
  • min est un nombre représentant la taille de police minimale que le texte est autorisé à atteindre en pixels. La valeur par défaut est 1.
  • max est un nombre représentant la taille de police maximale que le texte est autorisé à atteindre en pixels. La valeur par défaut est 100.
  • forceSingleModeWidth est un booléen qui n’est utilisé que pendant single mode pour faire le Textfit le composant ignore complètement la hauteur de l’élément. La valeur par défaut est true.
  • throttle est un nombre représentant l’accélérateur de redimensionnement de la fenêtre en millisecondes. La valeur par défaut est 50.
  • onReady est une fonction qui est appelée chaque fois que le texte est adapté.

Deux des plus importants sont min et max, qui vous permettent de définir respectivement des limites inférieures et supérieures en termes de taille de police. Ensuite, il y a le mode prop, qui définit comment le Textfit composant doit se comporter. Cela nécessite une explication plus détaillée. Voyons donc les deux modes en action.

Comment insérer du texte sur une seule ligne dans des composants réutilisables

Le texte sur une seule ligne est représenté par des titres, des titres et des étiquettes. Il est généralement contenu dans <h1>, <h2>, <h3>, ou plus généralement <p> et <span> Éléments HTML. Lorsqu’il s’agit de texte sur une seule ligne, le problème d’ajustement est presque inévitable. En effet, sa taille de police a tendance à être beaucoup plus grande que celle utilisée dans les paragraphes. Quand le single le mode est activé par ce qui précède mode accessoire dans Textfit, l’algorithme suivant impliquant une étape obligatoire et une étape facultative est appliqué :

1. binary search to fit the element's width
2. if forceSingleModeWidth=false and text overflows height
    2a. binary search to also fit the element's height

Comme expliqué ici, le algorithme de recherche binaire permet de récupérer la bonne taille de police pour rendre le texte contenu dans le Textfit composant correspond à sa largeur. Puis si forceSingleModeWidth est réglé sur false, la même approche est utilisée, mais en tenant également compte de la hauteur de l’élément.

Rendre un composant React réutilisable : une démo en une seule ligne

Voyons maintenant le Textfit single mode en action à travers une démo live :

Voir le stylo
démo d’une seule ligne de react-textfit par SitePoint (@PointSite)
au Stylo de code.

Comme vous pouvez le voir, en allongeant votre texte, sa taille de police sera mise à jour en conséquence par Textfit pour qu’il corresponde à sa taille. La même logique est appliquée lors du redimensionnement de la zone de texte tout en maintenant le texte constant. C’est ce qui se produirait avec des écrans plus petits. Donc, Textfit représente la solution parfaite pour rendre les titres et les titres réactifs dans n’importe quel composant React ou élément HTML.

Comment ajuster le texte multiligne dans les composants réactifs réactifs

Le texte multiligne est représenté par des paragraphes, des sous-titres et des descriptions. Il est généralement contenu dans <p>, <em>, ou <div> Éléments HTML. Le problème d’ajustement avec le texte multiligne est fréquent en termes de hauteur. En fait, lorsqu’il s’agit d’écrans plus petits, votre texte deviendra plus grand en raison de la largeur réduite disponible. Par conséquent, votre texte peut dépasser des cartes ou des sections à hauteur fixe.

Quand le multi le mode est activé dans Textfit, l’algorithme suivant comportant deux étapes obligatoires est appliqué :

1. binary search to fit the element's height
2. if text overflows width
    2a. binary search to also fit the element's width

Les algorithme de recherche binaire permet de récupérer la bonne taille de police pour rendre le texte contenu dans le Textfit composant correspond à sa hauteur. Ensuite, la même approche est utilisée, mais en tenant également compte de la largeur de l’élément. Comme vous pouvez le voir, contrairement à ce qui se passe dans le single mode, la hauteur a priorité sur la largeur. Ceci s’explique par la raison présentée ci-dessus.

Rendre un composant React réutilisable : une démo multi-lignes

Voyons maintenant le Textfit multi mode en action à travers une démo live :

Voir le stylo
démo multi-lignes de react-textfit par SitePoint (@PointSite)
au Stylo de code.

En interagissant avec la démo en direct et en allongeant votre texte multiligne, sa taille de police sera mise à jour pour que le texte s’adapte à la dimension de l’élément HTML. La même chose se produit lors du redimensionnement du Textfit composant tout en maintenant le texte constant. C’est ce qui se passera avec des écrans plus petits. Donc, Textfit est une bonne solution pour rendre les paragraphes et les longues descriptions réactifs dans n’importe quel élément HTML ou composant React.

Conclusion

Depuis que les smartphones et les tablettes sont devenus les appareils les plus utilisés pour accéder au Web, la réactivité est devenue un problème qui ne peut plus être négligé. Dans cet article, nous avons examiné un problème spécifique dans ce domaine. En particulier, nous avons exploré un problème d’ajustement de texte particulier, pourquoi il est si important de le résoudre et comment le faire dans React.

Les react-textfit library est une bibliothèque React utile, open source et efficace qui vous permet d’adapter facilement votre texte – à la fois à une ligne et à plusieurs lignes – à n’importe quel composant React sans effort. J’espère que vous avez trouvé l’explication et les démos utiles. Merci d’avoir lu! N’hésitez pas à me contacter pour toutes questions, commentaires ou suggestions.

— to www.sitepoint.com