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

Le développement avec React implique de définir des composants réutilisables et de les combiner en différentes parties de l'application pour implémenter l'interface utilisateur souhaitée. Cet article présentera la bibliothèque React-TextFit, qui facilite la création de composants réactifs réactifs qui affichent du texte de manière prévisible n'importe où dans la disposition.

Points clés

La bibliothèque
• React-TextFit est une solution pratique pour créer des composants React réactifs, qui permet au texte de redimensionner automatiquement le conteneur dans lequel il se trouve sans avoir besoin de personnaliser constamment les règles CSS.
• La bibliothèque React-TextFit utilise un algorithme de recherche binaire pour trouver la taille de la police correcte du texte, en tenant compte de la largeur et de la hauteur du conteneur. Il fonctionne dans n'importe quelle configuration de style CSS et peut être utilisé pour le texte unique et multi-lignes.
• La bibliothèque React-TextFit fournit deux modes: "Single" et "Multi". Le mode "unique" est idéal pour les titres, qui redimensionnent la police afin que l'ensemble du texte convient à l'affichage sur une seule ligne. Le mode "Multi" convient aux paragraphes et aux longues descriptions, permettant de rompre le texte lors de la redimensionnement de la police afin que tout le texte s'adapte dans le conteneur.
La bibliothèque
• react-textFit fournit également des accessoires, y compris min et max pour définir la taille minimale et maximale de la police que le texte peut atteindre, mode pour définir les composants de la méthode utilisés pour adapter le texte, et 🎜> , c'est une fonction appelée lorsque le texte est adapté. onReady

Problèmes d'adaptation du texte

Étant donné que les composants React sont des extraits de code JavaScript qui décrivent des parties spécifiques de l'interface utilisateur, ils sont en fait indépendants les uns des autres. Leurs styles visuels y sont généralement intégrés dans le cadre de leur définition. Ceci est très utile étant donné qu'ils peuvent être utilisés dans différents endroits et dispositions.

Cependant, l'intégration des styles dans les composants réutilisables présente également des inconvénients. Un exemple est dans l'aspect réactif. Supposons que vous souhaitiez qu'une ligne de texte (comme le titre) soit complètement remplie de l'espace pour lequel il se réserve (en termes de hauteur et de largeur), mais pas des pauses de ligne - qui ne nécessitent pas d'écriture de règles CSS personnalisées pour chaque possible situation. (Des exemples de cette fonctionnalité dont vous pourriez avoir besoin inclure des slogans commerciaux, des messages publicitaires ou du texte intégrés dans le composant de la barre de navigation.)

CSS et portabilité

Lorsque vous définissez le style d'un composant réactif réactif, vous devez considérer la taille, la mise en page ou le style de chaque composant parent qui peut l'envelopper afin de redimensionner la police en conséquence. Comme vous pouvez l'imaginer, il n'est en fait pas possible de considérer chaque taille de conteneur possible - même si vous pouvez le faire avec CSS. Vous pourrez poursuivre trop de scénarios de fenêtre que la rédaction de requêtes médiatiques n'est pas pratique. Mais il n'y a en fait aucun moyen dans CSS pour s'assurer que les blocs de texte s'adaptent toujours à une seule ligne, à l'exception des requêtes multimédias.

Créer des composants de réaction réutilisables

Heureusement, certaines bibliothèques React peuvent facilement résoudre ce problème. Ils vous permettent de définir des composants de réaction réutilisables où le comportement du texte est indépendant du conteneur où les composants réutilisables sont placés. À la fin de cet article, vous pourrez utiliser ces bibliothèques pour résoudre les problèmes d'ajustement de texte mentionnés ci-dessus et rendre les composants réutilisables. Jetons donc un coup d'œil à tout ce que vous devez savoir afin que votre texte s'adapte automatiquement à l'espace disponible dans React.

Tout d'abord, nous explorerons pourquoi il est si important de faire face à un tel problème et pourquoi les solutions courantes peuvent ne pas suffire, surtout lors de l'utilisation de React. La bibliothèque React-TextFit React sera ensuite introduite et utilisée pour implémenter des solutions pour le texte unique et multi-lignes.

Problème d'ajustement de texte dans les composants réutilisables

Jetons un coup d'œil à la démonstration suivante, qui explique le problème d'ajustement de texte avec un exemple.

L'objectif est de faire en sorte que le titre s'adapte à l'espace réservé, quelle que soit la taille de l'écran de l'utilisateur. Dans cet exemple, les unités de la fenêtre sont utilisées pour définir la taille de la police du titre. Par conséquent, lors de l'ajustement de la taille de l'Iframe de la bordure rouge représentant l'écran de l'utilisateur, le titre s'adaptera toujours à son parent

. Ainsi, cette méthode permet bien sûr au texte du titre de s'adapter à n'importe quelle largeur d'écran. Cependant, les composants de style titre ne sont pas réutilisables. En effet, il est conçu uniquement pour ce texte spécifique. En ajoutant du contenu au texte du titre ou en redimentant le parent

, le texte ne s'adaptera plus à une seule ligne. (Vous pouvez essayer de modifier le texte dans la démo.) Nous voulons que les composants réutilisables soient plus adaptables que cela. Comme mentionné précédemment, les requêtes multimédias CSS offrent une autre solution qui vous permet de redimensionner les polices de texte en fonction de la taille de l'écran. Il s'agit de la solution idéale lorsque l'on considère toute la page Web. Cependant, il n'est pas pratique de chasser d'innombrables largeurs de conteneurs possibles avec des requêtes multimédias. Cela entraînera beaucoup de travail. De plus, cela réduira considérablement la portabilité de vos composants.

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

Alors, voyons comment la bibliothèque React-TextFit React permet au texte de s'adapter automatiquement à l'espace disponible, ce qui rend les composants réutilisables.

Comme vous pouvez le voir, le problème ci-dessus a été résolu. Avec React-TextFit, vous pouvez maintenant modifier le titre ou ajuster le parent

Taille tout en gardant le titre étroitement s'adapte à l'espace disponible. ### Comment TextFit fonctionne

Maintenant, apprenons plus sur le fonctionnement de React-TextFit.

Comme indiqué dans la page GitHub officielle du projet, React-TextFit est une bibliothèque pour ajuster les titres et les paragraphes dans n'importe quel composant réutilisable. Il trouve efficacement l'ajustement correct et fonctionne avec toute configuration de style CSS tel que le rembourrage, la hauteur de la ligne, etc.

Vous pouvez l'ajouter à vos dépendances en démarrant la commande suivante:

<code>npm install react-textfit --save</code>

Vous pourrez alors accéder au composant TextFit pour s'adapter à n'importe quel texte comme suit:

<code>import { Textfit } from 'react-textfit';</code>

TextFit sera converti en un

Élément HTML et vous permet d'adapter du texte unique et multi-lignes dans n'importe quel composant réutilisable ou élément HTML. Pour l'utiliser, vous n'avez qu'à en faire une nouvelle ligne comme ceci:

<code>npm install react-textfit --save</code>

ou tout élément HTML inclus comme suit:

<code>import { Textfit } from 'react-textfit';</code>

Parce que TextFit est un

, vous pouvez y transmettre des règles CSS via React Style Prop, comme indiqué ci-dessous:

<code><textfit></textfit>  示例文本</code>

ou affectez-le à la classe CSS via ClassName comme suit:

<code><textfit></textfit>  示例文本</code>

TextFit accessoires

TextFit est également livré avec certains accessoires qui peuvent être utilisés pour ajuster le texte au besoin. Regardons-les:

• 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. Le mode "unique" est appliqué au titre et le mode "Multi" est appliqué au paragraphe. La valeur par défaut est "multi".
• min est un nombre qui représente la taille minimale de la police (en pixels) que le texte permet de réaliser. La valeur par défaut est 1.
• max est un nombre qui indique la taille maximale de la police (en pixels) que le texte permet de réaliser. La valeur par défaut est de 100.
• forceSingleModeWidth est une valeur booléenne qui n'est utilisée qu'en mode unique et est utilisée pour faire en sorte que le composant TextFit ignore complètement la hauteur de l'élément. La valeur par défaut est vraie.
• throttle est un nombre qui représente le temps de limitation (en millisecondes) du redimensionnement de la fenêtre. La valeur par défaut est 50.
• onReady est une fonction appelée lorsque le texte s'adapte.

Les deux plus importants sont min et max, qui vous permettent de définir les limites inférieures et supérieures de la taille de la police, respectivement. Ensuite, il y a l'hélice mode, qui définit comment le composant TextFit se comporte. Cela nécessite une explication plus détaillée. Voyons donc comment ces deux modes fonctionnent réellement.

Comment ajuster la ligne de texte unique dans les composants réutilisables

Le texte unique est représenté par des titres, des titres et des étiquettes. Il est généralement inclus dans

,

,

,

ou plus généraux mode HTML. Lorsque vous traitez avec du texte unique, les problèmes d'ajustement sont presque inévitables. En effet, sa taille de police a tendance à être beaucoup plus grande que la taille de la police utilisée dans les paragraphes. Lorsque le mode unique est activé via l'hélice

ci-dessus dans TextFit, l'algorithme suivant avec des étapes forcées et facultatifs est appliquée:

<code><textfit style='{{"width":'>
  示例文本
</textfit></code>

forceSingleModeWidth Comme expliqué ici, l'algorithme de recherche binaire est utilisé pour récupérer la taille de police correcte pour que le texte contenu dans le composant TextFit ait la largeur. Ensuite, si

est défini sur False, la même méthode est utilisée - mais considérez également la hauteur de l'élément.

Rendre les composants de réaction réutilisables: démo à ligne unique

Maintenant, voyons l'effet réel du mode unique TextFit avec une démonstration en temps réel:

Comme vous pouvez le voir, en rendant votre texte plus long, TextFit mettra à jour sa taille de police en conséquence pour le faire correspondre à la taille. La même logique se produira également lorsque la zone de texte est redimensionnée tout en gardant le texte inchangé. C'est ce qui se passe sur les petits écrans. Par conséquent, TextFit représente la solution parfaite pour rendre le titre et le titre réactifs dans n'importe quel composant React ou élément HTML.

Comment ajuster le texte multi-lignes dans un composant réactif réactif

Plusieurs lignes de texte sont représentées par des paragraphes, des sous-titres et des descriptions. Il est généralement inclus dans les éléments

,

ou HTML. Les problèmes d'ajustement avec le texte multi-lignes sont communs en hauteur. En fait, lorsque vous travaillez avec des écrans plus petits, le texte deviendra plus élevé en raison de la largeur réduite disponible. En conséquence, cela peut entraîner une carte ou une section de votre texte avec une hauteur fixe. Lorsque le mode multi-rang est activé dans TextFit, l'algorithme suivant avec deux étapes forcées est appliquée:

<code>npm install react-textfit --save</code>

L'algorithme de recherche binaire est utilisé pour récupérer la taille de police correcte pour que le texte contenu dans le composant TextFit ait la hauteur. Ensuite, la même méthode est utilisée, mais la largeur de l'élément est également prise en compte. Comme vous pouvez le voir, contrairement au mode unique, la hauteur a priorité sur la largeur. Cela peut s'expliquer par les raisons proposées ci-dessus.

Rendre les composants React réutilisables: démo multi-lignes

Maintenant, voyons l'effet réel du mode Multi-Line TextFit avec une démonstration en temps réel:

En interagissant avec la démo en direct et en allant votre texte multiligne, sa taille de police sera mise à jour pour faire correspondre le texte à la taille de l'élément HTML. La même situation se produira également lorsque le composant TextFit est redimensionné tout en gardant le texte inchangé. C'est ce qui se passe sur les petits écrans. Par conséquent, TextFit est une bonne solution pour rendre les paragraphes et les descriptions longues réactives dans n'importe quel élément HTML ou composant React.

Conclusion

Étant donné 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 être ignoré. Dans cet article, nous examinons un problème spécifique dans ce domaine. En particulier, nous explorons un problème d'ajustement de texte spécifique, pourquoi le résoudre est si important et comment le faire dans React.

La bibliothèque React-TextFit est une bibliothèque React Open Source utile et efficace qui vous permet d'adapter facilement votre texte (unique et multi-lignes) à n'importe quel composant React. J'espère que vous trouverez utile l'explication et la présentation. Merci d'avoir lu! Si vous avez des questions, des commentaires ou des suggestions, n'hésitez pas à me contacter.

Des questions fréquemment posées sur les composants réactifs réactifs - TextFit (FAQ)

Quelles sont les principales fonctions du composant TextFit dans React?

Le composant TextFit de React est principalement utilisé pour rendre le texte sensible. Il ajuste automatiquement la taille de la police en fonction de la largeur et de la hauteur de son conteneur. Ceci est particulièrement utile dans la conception Web réactive où les dispositions doivent s'adapter à différentes tailles d'écran. Le composant TextFit garantit que le texte reste lisible et esthétique, quelle que soit la taille de l'appareil ou de l'écran.

Comment installer le composant TextFit dans mon projet React?

Vous pouvez utiliser NPM (Node Package Manager) pour installer des composants TextFit dans votre projet React. Ouvrez votre terminal, accédez à votre répertoire de projet et exécutez la commande suivante: <code>npm install react-textfit --save</code>. Cela ajoutera le composant TextFit aux dépendances de votre projet.

Comment utiliser le composant TextFit dans mon application React?

Après avoir installé le composant TextFit, vous pouvez l'importer dans votre composant React en utilisant la ligne de code suivante: import TextFit from 'react-textfit';. Vous pouvez ensuite utiliser le composant TextFit dans votre méthode de rendu comme vous le feriez avec tout autre composant React. Par exemple: <textfit max="{40}" mode="single">这是一些文本</textfit>.

Quels sont les différents modèles de composants TextFit?

Le composant TextFit fournit deux modes: "Single" et "Multi". Le mode "unique" ajuste la taille de la police afin que l'ensemble du texte s'adapte à une seule ligne. Le mode "Multi" permet à le texte d'être emballé lors de l'ajustement de la taille de la police afin que tout le texte s'inscrit dans le conteneur.

Puis-je définir les tailles de police maximales et minimales dans le composant TextFit?

Oui, vous pouvez définir les tailles de police maximales et minimales dans le composant TextFit à l'aide des accessoires max et min respectivement. Par exemple: <textfit max="{40}" min="{10}" mode="single">这是一些文本</textfit>.

Comment le composant TextFit gère-t-il le débordement?

Le composant TextFit empêche automatiquement le débordement de texte en ajustant la taille de la police. Si le texte ne peut pas être placé dans le conteneur à la taille minimale de la police spécifiée, le composant TextFit tronque le texte et ajoute une ellipsis.

Puis-je utiliser des composants TextFit avec d'autres composants React?

Oui, le composant TextFit peut être utilisé avec d'autres composants React. Vous pouvez nicher d'autres composants dans le composant TextFit ou utiliser des composants TextFit dans d'autres composants.

Le composant TextFit est-il compatible avec tous les navigateurs?

Le composant TextFit est compatible avec tous les navigateurs modernes qui prennent en charge React et CSS3. Cela comprend Chrome, Firefox, Safari, Edge et Internet Explorer 9 et plus tard.

Puis-je utiliser des composants TextFit dans une application REACT rendue côté serveur?

Oui, le composant TextFit peut être utilisé dans les applications REATS rendues côté serveur. Cependant, comme le composant TextFit s'appuie sur le DOM pour calculer la taille de la police, il ne redimensionne la police que après que le client a installé le composant.

Comment résoudre les problèmes avec les composants TextFit?

Si vous rencontrez des problèmes avec le composant TextFit, vous pouvez vérifier la console pour tous les messages d'erreur. Ces messages peuvent fournir des indices sur ce qui pourrait causer le problème. Si vous ne pouvez pas résoudre le problème, vous pouvez demander l'aide de la communauté React ou du personnel de maintenance des composants TextFit.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!