kanglai-recording-screen-cv/packages/docs/timer/examples.md

outline
deep

Timer API Examples

本页是介绍@pear-rec/timer 插件的API例子

本插件提供了计时器功能。

安装

import "@pear-rec/timer";
import "@pear-rec/timer/src/Timer/index.module.scss";

timer 计时器

效果展示

完整代码

import { useState } from "react";
import { useStopwatch } from "react-timer-hook";
import Timer from "@pear-rec/timer";
import "@pear-rec/timer/src/Timer/index.module.scss";

function App() {
	const { seconds, minutes, hours, days, start, pause, reset } = useStopwatch({
		autoStart: true,
	});

	const [isShowTitle] = useState(true);
	return (
		<div className="separator">
			<h2>UseStopwatch Demo</h2>
			<div className="timer">
				<Timer
					seconds={seconds}
					minutes={minutes}
					hours={hours}
					days={days}
					isShowTitle={isShowTitle}
				/>
			</div>
			<div className="button" onClick={start}>
				Start
			</div>
			<div className="button" onClick={pause}>
				Pause
			</div>
			<div className="button" onClick={() => reset}>
				Reset
			</div>
		</div>
	);
}

export default App;