L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
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 lesréagir-textfitbibliothè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 titre, 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 leréagir-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 textepar SitePoint (@SitePoint)
surCodePen.
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êtreservent à définir lataille de police pour le titre. Par conséquent, lors du redimensionnement de la bordure rougeiframereprésentant l'écran de l'utilisateur, le titre correspondra toujours à son parent
. Cette méthode permet donc certainement au texte du titre de s'adapter à n'importe quelle largeur d'écran. Cependant, le
Gros titre 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 , 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 parRequê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.
réagir-textfitcomme solution pour Responsive React Text
Voyons donc comment leréagir-textfitLa 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-textfitpar SitePoint (@SitePoint)
surCodePen.
Comme vous pouvez le voir, les problèmes susmentionnés ont. Grâce àréagir-textfitvous pouvez maintenant modifier le titre ou redimensionner le parent
tout en gardant votre titre parfaitement adapté à l'espace disponible.CommentAjustement du texteœuvres
Voyons maintenant en détail commentréagir-textfitœuvres.
Comme indiqué dansla page GitHub officielle du projet,réagir-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 querembourrage,hauteur de la ligneetc.
Vous pouvez l'ajouter à vos dépendances en lançant la commande suivante :
au dessus du niveau de la mer installerréagir-textfit --save
Vous pourrez alors accéder auAjustement du textecomposant pour s'adapter à n'importe quel texte, comme suit :
importer { Ajustement du texte } depuis 'réagir-textfit';
Ajustement du textesera traduit en un
é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 :
<Ajustement du texte>
Échantillontexte</Ajustement du texte>
Ou tout élément HTML contenant, comme suit :
<Ajustement du texte>
<portée>Échantillontexte</portée>
</Ajustement du texte>
DepuisAjustement du texteest un
vous pouvez lui transmettre des règles CSS via Reactstyleprop, comme suit :<Ajustement du textestyle={{"largeur": "200px"}}
>
Échantillontexte</Ajustement du texte>
Ou en l'affectant à une classe CSS vianom du courscomme suit:
<Ajustement du textenom du cours={"divWidth200"}
>
Échantillontexte</Ajustement du texte>
Accessoires Textfit
Ajustement du texte est également livré avec quelques accessoires qui peuvent être utilisés pour adapter votre texte comme vous le souhaitez. Voyons-les tous :
modeest une chaîne qui peut prendre deux valeurs :Célibataireou alorsmulti . Il définit la méthode utilisée par le composant pour ajuster le texte. LeCélibatairemode doit être utilisé pour les titres, et lemulti mode pour les paragraphes. La valeur par défaut estmulti.min est un nombre représentant la taille de police minimale que le texte est autorisé à atteindre en pixels. La valeur par défaut est1.maximum est un nombre représentant la taille de police maximale que le texte est autorisé à atteindre en pixels. La valeur par défaut est100.forceSingleModeWidthest un booléen utilisé uniquement pendantCélibatairemode pour faire leAjustement du texte ignore complètement la hauteur de l'élément. La valeur par défaut estvrai.Manette de Gaz est un nombre représentant la limitation de redimensionnement de la fenêtre en millisecondes. La valeur par défaut est50.onReadyest une fonction qui est appelée chaque fois que le texte est ajusté.
Deux des plus importants sontminetmaximum , qui vous permettent de définir respectivement des limites inférieure et supérieure en termes de taille de police. Ensuite, il y a lemodeprop, qui définit comment leAjustement du texte 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
,Célibatairemode est activé par ce qui précèdemodesoutenir dansAjustement du textel'algorithme suivant impliquant une étape obligatoire et une étape facultative est appliqué : 1. recherche binaire pour s'adapter à la largeur de l'élément 2. si forceSingleModeWidth=false et que le texte dépasse la hauteur 2a. recherche binaire pour s'adapter également à la hauteur de l'élément
Comme expliqué ici, lealgorithme de recherche binairepermet de récupérer la bonne taille de police pour rendre le texte contenu dans leAjustement du texte le composant s'adapte à sa largeur. Puis siforceSingleModeWidthest réglé surfauxla 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 TextfitCélibatairemode en action à travers une démo en direct :
Voir le stylo
démo sur une seule ligne react-textfitpar SitePoint (@SitePoint)
surCodePen.
Comme vous pouvez le voir, en rendant votre texte plus long, sa taille de police sera mise à jour en conséquence parAjustement du texte 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,Ajustement du texterepré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
,
É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 lemultimode est activé dansAjustement du textel'algorithme suivant comportant deux étapes obligatoires est appliqué :
1. recherche binaire pour ajuster la hauteur de l'élément 2. si le texte dépasse la largeur 2a. recherche binaire pour s'adapter également à la largeur de l'élément
Lealgorithme de recherche binairepermet de récupérer la bonne taille de police pour rendre le texte contenu dans leAjustement du texte 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 leCélibataire 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 Textfitmultimode en action à travers une démo en direct :
Voir le stylo
démo multi-lignes react-textfitpar SitePoint (@SitePoint)
surCodePen.
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 duAjustement du texte composant tout en maintenant le texte constant. C'est ce qui se passera avec des écrans plus petits. Alors,Ajustement du texteest 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.
Leréagir-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.
Source link