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

Développer 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 allons voir les react-textfit bibliothèque, ce qui facilite la création de composants réactifs 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 souhaitiez qu’une ligne de texte, telle qu’un en-tête, remplisse complètement l’espace qui lui est réservé en termes de hauteur et de largeur, mais ne s’enroule pas, le tout sans avoir à écrire de règles CSS personnalisées pour chaque situation possible. (Par exemple, vous pouvez souhaiter que cela comprenne des slogans commerciaux, des messages publicitaires ou du texte intégré dans les composants de la barre de navigation.)

CSS et portabilité

Lors de la définition du style de votre composant réactif React, vous souhaitez 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 rechercheriez 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 requêtes multimédias, il n’y a pas vraiment de moyen en CSS de s’assurer qu’un bloc de texte tiendra toujours sur 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 pourrez 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 il est si important de faire face à un tel problème et pourquoi les solutions courantes 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 de 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 (@SitePoint)
sur CodePen.

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 servent à définir la font-size pour le titre. Par conséquent, lors du redimensionnement de 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 stylé n’est pas réutilisable. C’est parce qu’il est conçu avec seulement 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 expérimenter la modification du texte dans la démo.) Nous voulons vraiment qu’un composant réutilisable soit plus adaptable que cela.

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 chasser un nombre infini de largeurs de conteneurs possibles avec des requêtes multimédias. Cela entraînerait beaucoup de travail. De plus, cela rendrait vos composants beaucoup moins portables.

react-textfit comme solution pour Responsive React Text

Voyons donc comment le react-textfit La bibliothèque React permet d’adapter automatiquement le texte à l’espace disponible, ce qui rend le composant réellement réutilisable.

Voir le stylo
Problème d’ajustement de texte avec react-textfit par SitePoint (@SitePoint)
sur CodePen.

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

Comment Textfit œuvres

Voyons maintenant en détail comment react-textfit œuvres.

Comme indiqué dans la page GitHub officielle du projet, react-textfit est une bibliothèque permettant d’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-heightetc.

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 du texte sur une seule ligne et sur plusieurs lignes dans tous les composants ou éléments HTML réutilisables.

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 classNamecomme 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 alors multi. Il définit la méthode utilisée par le composant pour ajuster le texte. Le single mode 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 utilisé uniquement pendant single mode pour faire le Textfit ignore complètement la hauteur de l’élément. La valeur par défaut est true.
• throttle est un nombre représentant la limitation 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 ajusté.

Deux des plus importants sont min et max, qui vous permettent de définir respectivement des limites inférieure et supérieure 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. Alors, voyons les deux modes en action.

Comment ajuster le texte sur une seule ligne dans les 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 mode est activé par ce qui précède mode soutenir dans Textfitl’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 le composant s’adapte à sa largeur. Puis si forceSingleModeWidth est réglé sur falsela 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émonstration en une seule ligne

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

Voir le stylo
démo sur une seule ligne react-textfit par SitePoint (@SitePoint)
sur CodePen.

Comme vous pouvez le voir, en rendant votre texte plus long, 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 passerait avec des écrans plus petits. Alors, 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 alors <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, cela peut faire en sorte que votre texte dépasse les cartes ou les sections à hauteur fixe.

Quand le multi mode est activé dans Textfitl’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

Le algorithme de recherche binaire permet de récupérer la bonne taille de police pour rendre le texte contenu dans le Textfit composant adapté à 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. Cela 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 en direct :

Voir le stylo
démo multi-lignes react-textfit par SitePoint (@SitePoint)
sur CodePen.

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 corresponde à 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. Alors, 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 nous sommes penchés sur 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 s’y attaquer et comment le faire dans React.

Le react-textfit est une bibliothèque React utile, open-source et efficace qui vous permet d’adapter facilement votre texte – à la fois sur une seule ligne et sur 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 toute question, commentaire ou suggestion.