react-timer-simple
Simple customized timer on React in material design. Has callbacks API.
Installation
$ npm i react-timer-simple
DEMO
click
Usage
Import timer to your project.
;
const timerStyle = margin: "0px" padding: "1em" ; const buttonsStyle = display: "flex" ; const buttonStyle = background: "#fff" color: "#8e44ad" borderRadius: "30px" border: "1px solid #8e44ad" margin: "0 5px" padding: "10px 40px" fontWeight: "400" width: "100%" fontSize: 14 textTransform: "uppercase" letterSpacing: "0.42px" cursor: "pointer" textAlign: "center" outline: "none" ; const secondsStyles = fontSize: "64px" fontWeight: "400" lineHeight: "75px" margin: "0" color: "#312f2f" textAlign: 'center' ; const overTime = fontSize: "64px" fontWeight: "400" lineHeight: "75px" margin: "0" color: "rgb(232, 79, 100)" textAlign: 'center' ; const limitStyle = position: 'absolute' top: 20 right: 20 color: "#312f2f" fontWeight: "400" fontSize: "20px" ; const OPTIONS = autoplay: false startTime: 0 // milliseconds limit: 5000 // If the time is greater than the limit, the main timer will change the styles. You can, for example, paint it red (milliseconds) play: 'play' // button name. If not set, the button will not appear pause: 'pause' // button name. If not set, the button will not appear reset: 'reset' // button name. If not set, the button will not appear ripple: // Ripple lib https://www.npmjs.com/package/@intereact/ripple enterDuration: 400 exitDuration: 400 size: "cover" ; <Timer options=OPTIONS timerStyle=timerStyle buttonsStyle=buttonsStyle buttonStyle=buttonStyle secondsStyles=secondsStyles limitStyle=limitStyle overTime=overTime />