Comment créer un composant Compte à rebours en utilisant React & MomentJS

Récemment, j'ai dû créer un compte à rebours pour l'un de mes autres projets, et j'ai pensé qu'il pourrait également constituer un bon tutoriel. Donc, dans cet article, nous allons créer ce composant en utilisant React et un peu de SVG.

Vous pouvez trouver le résultat final dans cet exemple Codepen:

Nous allons d’abord créer la fonctionnalité de compte à rebours, puis nous verrons comment créer l’arc animé en utilisant SVG avec quelques fonctions sophistiquées.

Création de la fonctionnalité compte à rebours

Pour cela, nous allons utiliser la bibliothèque MomentJS qui nous aidera à analyser, valider, manipuler et afficher les dates et heures.

Ce dont nous aurons besoin, c’est d’avoir deux dates:

  • la date actuelle ou maintenant
  • la date limite ou alors

Lorsque nous avons ces 2 dates, nous pouvons maintenant soustraire en utilisant moment et nous aurons le temps restant (ou la valeur du compte à rebours).

Pour la date d'alors, nous devrons passer 2 chaînes:

  • un, la chaîne timeTillDate contenant la date finale jusqu'à laquelle nous voulons compter (par exemple: 05 26 2019, 6h00)
  • deuxièmement, la chaîne timeFormat utilisée par moment pour valider le format de l'heure (dans notre exemple, serait: MM JJ AAAA, h: mm a)

Vous pouvez en savoir plus sur l'analyse des chaînes et leur formatage dans la documentation.

Voyons à quoi cela ressemble dans le code:

Remarque: les valeurs timeTillDate, timeFormat seront fournies dans le composant React. Pour l'instant, nous les utilisons comme exemples.

À partir de l'objet compte à rebours, nous pouvons obtenir toutes les valeurs que nous voulons afficher dans notre composant - jours, heures, minutes et secondes jusqu'à ce que nous atteignions l'heure.

Plus tard, nous ajouterons ce code dans un intervalle JS appelé toutes les secondes, mais avant cela, définissons le composant react correspondant.

La composante compte à rebours

Pour cela, nous allons créer un composant basé sur une classe, car nous avons besoin d’avoir accès à son état, car nous y enregistrerons ces 4 valeurs (jours, heures, minutes, secondes). Par défaut, ces valeurs ne sont pas définies.

Ensuite, créons l’intervalle qui s’exécute toutes les secondes et enregistre les valeurs dans l’état du composant. Nous ferons cet intervalle dans la méthode de cycle de vie composantDidMount. Nous allons effacer l'intervalle dans la méthode de cycle de vie composantWillUnmount, car nous ne voulons pas le laisser fonctionner après la suppression du composant du DOM.

Le CSS

Nous avons maintenant la fonctionnalité de compte à rebours, alors appelons-la un peu:

Rien d'extraordinaire dans le CSS; Nous utilisons flexbox pour positionner les éléments dans l’emballage.

Enfin, créons l’arc SVG qui entourera chaque élément de notre compte à rebours.

Le composant SVGCircle

Avant de le faire, nous avons besoin de quelques fonctions pour créer l’arc SVG personnalisable. J'ai trouvé ceux-ci sur StackOverflow. Pour plus d'informations, vous devriez y aller et lire l'explication détaillée des fonctions.

Fondamentalement, la fonction ci-dessus calcule la manière dont l'arc doit être tracé en fournissant un ensemble de valeurs telles que: les points de début et de fin, le rayon et les angles.

Revenons à notre composant React: nous allons créer le svg et nous y trouverons une balise path qui tracera l’arc (le d prop) en lui attribuant une propriété radius. Les 4 autres valeurs de la fonction describeArc sont corrigées, car nous ne souhaitons pas la modifier et nous la personnalisons pour qu'elle soit bien dans notre exemple.

Et nous avons également besoin d’un peu de CSS pour le positionner dans le .countdown-item (Voir où se trouve ce composant dans la section résultat final):

Avant d'ajouter ce composant au composant Compte à rebours, nous devons convertir les valeurs dont nous disposons (jours, heures, minutes et secondes) en valeurs de rayon correspondantes.

Pour cela, nous aurons besoin d’une autre fonction simple qui mappera un nombre compris dans une plage (dans notre cas, les valeurs de date) à une autre plage de nombres (dans notre cas, le rayon). Cette fonction est également de StackOverflow:

Le résultat final

Enfin, ajoutons le nouveau composant SVGCircle dans chacun des éléments .countdown et assemblons le tout:

Tout ce que vous avez à faire pour utiliser le composant Compte à rebours est de lui transmettre les deux accessoires (timeTillDate et timeFormat) et vous êtes en or:

Conclusion

C'était un petit projet amusant avec React, n'est-ce pas?

Quand j’ai construit cela, j’en ai appris un peu plus sur la façon de travailler avec la bibliothèque momentjs et aussi avec svgs pour dessiner un arc.

Faites-moi savoir si vous avez des questions concernant ce tutoriel.

Bon codage!

Publié à l'origine sur www.florin-pop.com