Création d'un compte à rebours dynamique dans React.js

Dans le développement web, l'affichage d'un compte à rebours est une fonctionnalité courante sur les sites e-commerce, notamment pour des événements commerciaux ou des offres à durée limitée. Le défi est de créer un compte à rebours dynamique et visuellement attrayant sans recourir à des bibliothèques externes, garantissant des performances efficaces et une intégration transparente dans n'importe quelle application React.

Les comptes à rebours sont essentiels pour créer une urgence lors des ventes et des événements promotionnels. Ils encouragent les utilisateurs à agir avant la fin du temps imparti, ce qui en fait un outil puissant dans les stratégies marketing. Dans cet article, je vais vous guider à travers le processus de création d'un compte à rebours dynamique à l'aide de React.js et Tailwind CSS. Nous explorerons comment calculer le temps restant jusqu'à une date limite spécifique et l'afficher dans un format convivial.

Nous allons créer un composant de compte à rebours réutilisable dans React.js qui calcule le temps restant jusqu'à une date limite spécifiée et met à jour l'interface utilisateur toutes les secondes. Le composant sera stylisé à l'aide de Tailwind CSS pour garantir une conception moderne et réactive. L'objectif est de créer une minuterie qui affiche le nombre de jours, d'heures, de minutes et de secondes restants jusqu'à la fin de l'événement.

Explication de la mise en œuvre :

Étape 1 : configuration du composant React

Nous allons commencer par créer un composant Counter. Ce composant gérera l'état des jours et le temps restant (heures, minutes et secondes) jusqu'à la date limite.

import React, { useState, useEffect } from 'react';

const Counter = () => {
    const deadline = new Date('December 31 2024');
    const [days, setDays] = useState(0);
    const [timer, setTimer] = useState({
        hours: 0,
        minutes: 0,
        seconds: 0,
    });

Ici, la date limite est la date cible, et useState est utilisé pour stocker les jours restants et les composantes temporelles (heures, minutes, secondes).

Étape 2 : Calculer le temps restant

À l'intérieur du hook useEffect, nous définissons une fonction calculateTimeLeft qui calcule le temps restant jusqu'à la date limite. La fonction calcule la différence entre l'heure actuelle et l'heure limite, puis convertit cette différence en jours, heures, minutes et secondes.

useEffect(() => {
    const calculateTimeLeft = () => {
        const currentDate = new Date();
        const timeLeft = deadline.getTime() - currentDate.getTime();

        const days = Math.floor(timeLeft / (24 * 60 * 60 * 1000));
        const hours = 23 - currentDate.getHours();
        const minutes = 59 - currentDate.getMinutes();
        const seconds = 59 - currentDate.getSeconds();

        setDays(days);
        setTimer({ hours, minutes, seconds });
    };

    calculateTimeLeft();
    const intervalId = setInterval(calculateTimeLeft, 1000);

    return () => clearInterval(intervalId);
}, [deadline]);

Ce hook garantit que le temps restant est recalculé chaque seconde en utilisant setInterval pour mettre à jour l'état, ce qui déclenche un nouveau rendu du composant.

Étape 3 : Affichage du compte à rebours

Les valeurs calculées sont ensuite affichées à l'aide du composant TimeBox, qui restitue chaque unité de temps (jours, heures, minutes, secondes) dans un format visuellement attrayant.

return (
    <div className='w-full h-screen bg-black flex items-center justify-center'>
        <div className="w-full h-auto bg-black grid grid-cols-1 gap-8 place-items-center">
            <h1 className="text-5xl font-extrabold text-white">Sales Ends In</h1>
            <div className="w-fit h-auto overflow-hidden grid grid-cols-4 gap-4 place-items-center">
                <TimeBox label="Days" value={days} />
                <TimeBox label="Hours" value={timer.hours} />
                <TimeBox label="Minutes" value={timer.minutes} />
                <TimeBox label="Seconds" value={timer.seconds} />
            </div>
        </div>
    </div>
);

Le composant TimeBox est défini séparément pour rendre le code modulaire et réutilisable. Chaque TimeBox affiche une étiquette (par exemple, "Jours") et la valeur correspondante.

const TimeBox = ({ label, value }) => (
    <div className="w-24 h-24 bg-red rounded-xl p-4">
        <p className="text-center text-yellow font-bold">{label}</p>
        <p className="text-center font-bold text-2xl text-white">{value}</p>
    </div>
);

Étape 4 : Style avec Tailwind CSS

Nous utilisons Tailwind CSS pour styliser le compte à rebours. L'utilisation de classes utilitaires telles que bg-black, text-white, text-5xl et round-xl aide à créer une interface utilisateur moderne et réactive avec un minimum de CSS.

En suivant cette approche, vous pouvez créer un composant de compte à rebours hautement personnalisable et réutilisable pour n'importe quelle application React. Cette solution est efficace, évite les rendus inutiles et offre un design épuré et moderne avec Tailwind CSS. Que vous travailliez sur un site de commerce électronique ou sur tout autre projet nécessitant un compte à rebours, ce composant de minuterie intégrera et améliorera de manière transparente l'expérience utilisateur.

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!