How to realize the countdown function with React+Typescript

This article mainly introduces "how to use React+Typescript to achieve countdown function". In daily operation, I believe many people have doubts about how to use React+Typescript to achieve countdown function. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubt of "how to use React+Typescript to achieve countdown function". Next, please follow the editor to study!

Import {useEffect, useRef} from 'react'/** * interTerval hooks component * @ param fn execute function * @ param delay time * @ when param options immediate is true Execute the fn function immediately before the timer * / function useInterval (fn: () = > void, delay: number | null | undefined) Options?: {immediate?: boolean}): void {const immediate = options?.immediate const timerRef = useRef void > () timerRef.current = fn useEffect (() = > {if (delay = undefined | | delay = = null) {return} if (immediate) {timerRef.current?. ()} const timer = setInterval (() = > {timerRef.current?. ()}) Delay) return () = > {clearInterval (timer)}}, [delay])} export default useInterval

Implement countdown Hook

Import {useState, useEffect, useRef, useMemo} from 'react'import {useInterval} from'. / 'interface ITime {/ * * current time * / currentTime?: number / * * end time * / endTime?: number / * * there is no current time and end time. Direct transmission time difference * / differTime?: number} interface ICbTime {d: number h: number m: number s: number} / * * countdown hooks * @ param options time object * @ callback function * @ param noImmediate when the countdown completes, whether the callback will be executed immediately when the callback condition is met. Default false executes * / function useCountDown (options: ITime, cb?: () = > void, noImmediate?: boolean): ICbTime {const {currentTime = 0, endTime = 0, differTime = 0} = options const [diffTime SetDiffTime] = useState (0) / * * time when the component receives the parameter * / const entryTime = useRef (0) / * * the time difference required by the current countdown * / const maxTime = useRef (0) / * * whether callback can be performed * / const isImplementCb = useRef (false) useEffect (() = > {if (! isImplementCb.current) {isImplementCb.current = true} if ((currentTime)) > 0 & & endTime > 0) | differTime > 0) {entryTime.current = new Date () .getTime () maxTime.current = differTime > 0? DifferTime: endTime-currentTime if (maxTime.current {const curtTimes = new Date () .getTime () const TimeDifference = curtTimes-entryTime.current setDiffTime (maxTime.current-TimeDifference)}, diffTime {const time = diffTime > 0? DiffTime / 1000: 0 const d = Math.floor (time / (24 * 60 * 60)) const h = Math.floor ((time / (60 * 60))% 24) const m = Math.floor ((time / 60)% 60) const s = Math.ceil (time% 60) if (diffTime {cb?. (), 0)} return {d, h, m, s}} [diffTime]) return timeObj | | ({} as ICbTime)} export default useCountDown

Write a demo to see the effect?

Const TimeArea = () = > {const {d, h, m, s} = useCountDown ({currentTime: 1631262176333, endTime: 1831062176333}) () = > {alert ('countdown ends')}) return ({d} days from the end of the task {h < 10?'0' + h: h}: {m < 10?'0' + m: M}: {s < 10?'0' + s: s})} so far The study on "how to use React+Typescript to achieve the countdown function" is over. I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!