Untitled
unknown
plain_text
4 months ago
2.8 kB
5
Indexable
// import React,{ useState, useEffect ,useContext,useCallback} from "react"; // import { useTimer } from "react-timer-hook"; // // import { Text } from "../../../../../styled"; // // import { ExamContextConsumer } from "../../context"; // export default function MyTimer({ expiryTimestamp, onExpire, onTimeChange }) { // //console.log("Expiry Time : ",expiryTimestamp) // const { // seconds, // minutes, // hours, // isRunning, // } = useTimer({ expiryTimestamp, onExpire }); // // Call the onTimeChange callback every time the timer updates // useEffect(() => { // if(onTimeChange){ // onTimeChange({ hours, minutes, seconds, isRunning }); // } // }, [hours, minutes, seconds, isRunning, onTimeChange]); // return ( // <> // <div> // <div className="pkm">{hours}:{minutes}:{seconds}</div> // </div> // </> // ); // } // import React, { useEffect } from "react"; // import { useTimer } from "react-timer-hook"; // export default function MyTimer({ expiryTimestamp, onExpire, onTimeChange }) { // const { seconds, minutes, hours, isRunning } = useTimer({ // expiryTimestamp, // onExpire, // }); // // Ensure that onTimeChange is called whenever the timer updates // useEffect(() => { // if (onTimeChange) { // onTimeChange({ hours, minutes, seconds, isRunning }); // } // }, [hours, minutes, seconds, isRunning, onTimeChange]); // // Helper to format time // const formatTime = (time) => String(time).padStart(2, "0"); // return ( // <div> // <div className="pkm"> // {formatTime(hours)}:{formatTime(minutes)}:{formatTime(seconds)} // </div> // </div> // ); // } import React, { useEffect, useState } from "react"; import { useTimer } from "react-timer-hook"; export default function MyTimer({ expiryTimestamp, onExpire, onTimeChange }) { const { seconds, minutes, hours, isRunning, restart } = useTimer({ expiryTimestamp, onExpire: () => { setTimeOver(true); // Mark timer as over if (onExpire) onExpire(); // Call the onExpire callback }, }); const [timeOver, setTimeOver] = useState(false); // Ensure that onTimeChange is called whenever the timer updates useEffect(() => { if (!timeOver && onTimeChange) { onTimeChange({ hours, minutes, seconds, isRunning }); } }, [hours, minutes, seconds, isRunning, timeOver, onTimeChange]); // Helper to format time const formatTime = (time) => String(time).padStart(2, "0"); return ( <div> {timeOver ? ( <div className="" style={{color:"red"}}>Time Over</div> ) : ( <div className="pkm"> {formatTime(hours)}:{formatTime(minutes)}:{formatTime(seconds)} </div> )} </div> ); }
Editor is loading...
Leave a Comment