使用已解析的钩子

反应 钩倒计时器. 正如我所见 抖动 流经.

* 安装

此软件包托管于 无。 。 。 .

npm install @bradgarropy/use-countdown

使用量

在任何反应组件中,导入 useCountdown,然后叫它像任何其他 钩子返回时 countdown 值将随剩余时间而更新.

import useCountdown from "@bradgarropy/use-countdown"

const App = () => {
    const countdown = useCountdown({
        minutes: 1,
        seconds: 30,
        format: "mm:ss",
        autoStart: true,
        onCompleted: () => console.log("onCompleted"),
    })

    console.log(countdown)

    // {minutes: 1, seconds: 30, formatted: "01:30", ...}
    // {minutes: 1, seconds: 29, formatted: "01:29", ...}
    // {minutes: 1, seconds: 28, formatted: "01:28", ...}
    // ...
    // {minutes: 0, seconds: 0, formatted: "00:00", ...}
    // onCompleted()
}

API 参考

useCountdown({minutes, seconds})

根据提供的分数和秒数开始倒计时。 回来的 countdown 对象每秒更新一次,计时器打出零时停止.

这个 format 参数为 a date-fns 格式字符串.

如果提供,则 onCompleted 函数将在倒计时完成时调用.

这里有一些例子 如何呼叫 useCountdown。 。 。 .

const countdown = useCountdown({
    minutes: 1,
    seconds: 30,
    format: "mm:ss:SS",
    autoStart: true,
    onCompleted: () => console.log("onCompleted"),
})

const countdown = useCountdown({
    minutes: 5,
    onCompleted: () => console.log("onCompleted"),
})

const countdown = useCountdown({seconds: 10, format: "mm:ss:SS"})

返回对象每秒更新一次,直到倒计时器结束.

以下是返回对象的例子.

{
    minutes: 1,
    seconds: 30,
    formatted: "01:30",
    isActive: true,
    isInactive: false,
    isRunning: true,
    isPaused: false,
    pause: () => void,
    resume: () => void,
    reset: (time?: Time) => void,
}

问题

qq 通过文件报告错误 问题
提供反馈 问题 或继续 推特上说
用我的来 阿玛 或者说 推特上说 问任何其他问题

• 贡献者

布拉德・加罗皮 💻 📖 ⚠️ 🚇	马修·肖尔塔 💻 📖	詹姆斯·克莱克 🤔 📓	史蒂文·霍芬斯 📝 ✅	杰克・雷克 🤔 📓	迈赫迪·马赫卢菲 🤔 📓	丹尼尔·巴迪尔 🐛 🤔 📓
弗洛林·科斯明 💻	尼克·迪马特奥 🐛	吉米·龙利 🤔	努诺·丰塞卡 🤔	内森·亚瑟 🐛	苏帕夸 🐛 💻