React SVG Timer
A React component to provide an SVG-based timer button with visual feedback of elapsed time.
This is an improved iteration of previous projects:
All have their foundation in this fiddle.
Demo
Demo: markau.github.io/react-svg-timer
Installation
yarn add react-svg-timer
or npm install react-svg-timer
Usage
The minimum declaration is:
; <ReactSvgTimer timerCount=# seconds/>
Properties
The component can take additional, optional props:
countdownColor
: string: the color of the countdown ring. Type can be hex, rgb, rgba - whatever an SVG can use.innerColor
: string: the color of the inner circle ring.outerColor
: string: the color of the outer ring.resetTimerRequested
: bool: Whether the user has requested the timer be reset.resetTimer
: func: A callback function to further handle the timer reset event.completeTimer
: bool: Indicates whether the timer has reached the desired time.timerDuration
: int: The elapsed duration in milliseconds.displayCountdown
: bool: Shows/hides the numerical countdown.
A more complete implementation could therefore be:
// To keep track of the milliseconds elapsedlet timer = 0let resetRequested setResetRequested = let timerIsComplete setTimerIsComplete = let logMilliseconds setLogMilliseconds = { } { } { timer = value; if logMilliseconds console; } { timer = 0;} return <ReactSvgTimer timerCount=6 countdownColor="#00ffa8" innerColor="#fff" outerColor="#000" resetTimer=onReset completeTimer=onComplete resetTimerRequested=resetRequested timerDuration=timerValue displayCountdown=displayCountdown />
The optional props are designed to provide flexibility for implementation. You can use the timer as a discrete component, and just listen for the timerComplete
callback. Alternatively, for example, you could choose to hide the numerical display countdown with displayCountdown={false}
, and use the timerDuration
callback to provide your own numerical countdown.
Development
Built with create-react-library check that project to see how to build and run this module locally.
License
MIT © markau