Блог

Я создаю компонент секундомера, используя react stopwatch package..is есть какой-нибудь способ заставить секундомер начинаться с предела до нуля?

Вот мой код :

     const Stopwatch = () => (
      <ReactStopwatch
       seconds={0}
       minutes={0}
       hours={0}
       limit="00:00:15"
       onChange={({ seconds }) => {
      // do something
      }}
     onCallback={() => console.log('Finish')}
     render={({ seconds }) => {
      return (
        <div>
          <p>
            Resend OTP in: { seconds }
          </p>
        </div>
      );
    }}
   />
   );
 

и в результате получается таймер, начинающийся с 1 до 15, и я хочу, чтобы таймер начинался с 15 обратно до 0

Существует решение с той же функциональностью, но без использования внешних библиотек.

Вот вся необходимая вам логика: также вам нужно указать начальную точку (оставшееся время — но с какой точки?).

Разница является переменной, где U устанавливает начальные точки.

Любой конкретный вопрос о том, как работает код?

Код актуализируется каждые 1000 (второй аргумент в useEffect)

 const calculateTimeLeft = () => {
        let year = new Date().getFullYear();
        const difference =  new Date(`${year}-10-1`) -  new Date();
        let timeLeft = {};
    
        if (difference > 0) {
          timeLeft = {
            days: Math.floor(difference / (1000 * 60 * 60 * 24)),
            hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
            minutes: Math.floor((difference / 1000 / 60) % 60),
            seconds: Math.floor((difference / 1000) % 60),
          };
        }
    
        return timeLeft;
      };
    
      const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
      const [year] = useState(new Date().getFullYear());
    
      useEffect(() => {
        setTimeout(() => {
          setTimeLeft(calculateTimeLeft());
        }, 1000);
      });
    
      const timerComponents = [];
    
      Object.keys(timeLeft).forEach((interval) => {
        if (!timeLeft[interval]) {
          return;
        }
    
        timerComponents.push(
          <span>
            {timeLeft[interval]} {interval}{" "}
          </span>
        );
      });
      return (
        <div>
          <h1>HacktoberFest {year} Countdown</h1>
          <h2>With React Hooks!</h2>
          {timerComponents.length ? timerComponents : <span>Time's up!</span>}
        </div>
      );
    }
 

Ссылка:
https://github.com/do-community/react-hooks-timer/blob/master/src/App.js

Рабочий пример: Stackblitz

вы можете создать состояние и уменьшать его каждые секунды и отображать это:

 import React, { useEffect, useState } from "react";
import "./style.css";
import ReactStopwatch from "react-stopwatch";

const App = () => {
  const [sec, setSeconds] = useState(15);
  return (
    <ReactStopwatch
      seconds={0}
      minutes={0}
      hours={0}
      limit="00:00:15"
      onChange={({ seconds }) => {
        if (sec > 0) setSeconds(sec - 1);
      }}
      onCallback={() => console.log("Finish")}
      render={({ seconds }) => {
        return (
          <div>
            <p>Resend OTP in: {sec}</p>
          </div>
        );
      }}
    />
  );
};

export default App;