Big fix:
- Fix an issue where the
newStartAt
from the onComplete handler was not respected
Big fix:
- Replay the animation when the duration increases after the initial animation is over
Big fix:
- Check if the value passed to
reset
is a number
Big fix:
- Fix an issue where the new
updateInterval
prop didn't really respect that elapsed time. Now, for example, if it is set to 10 seconds then the next update will be exactly after 10 seconds.
Implemented enhancements:
newStartAt
value can now be passed to theonComplete
callback as well as thereset
method. This feature was available in v2 of the hook and it is implemented again in v.3
The hooks is now written in TypeScript.
Breaking Changes:
- IE is not longer supported
autoResetKey
props has been deprecatedreset
method of the hook return value no longer acceptsnewStartAt
. When it is fired the animation will start over from the initially providedstartAt
valueonComplete
return value does not acceptnewStartAt
New features:
updateInterval
prop now controls how often the hook should rerender. Set as a number in secondsonUpdate
callback will be fired with the current elapsed time when theelapsedTime
changes.
Chore:
- example folder is added, which can we be used for development or testing the hook
Chore:
- Update dependencies
- Add list of supported browsers
Chore:
- Update dependencies
Chore:
- Add Renovate and dump the versions of all dependencies
Big fix:
- A warning is thrown by React that it can not update state on unmounted component when the hook component is unmounted from the onComplete callback and the callback returns shouldRepeat = true. Originally reported bug - vydimitrov/react-countdown-circle-timer#28 (comment)
Big fix:
- Fix an issue where pausing the animation once it is completed, resetting the timer and playing again it did not work.
Big fix:
- SSR: use
useEffect
when environment isnode
orwindow
is undefined. When the environment is browseruseLayoutEffect
should be used instead - Remove side effects from
useState
soReact.StrictMode
doesn't bug the hook in development - Add a test to ensure that timeout is cancelled when
isPlaying
is set tofalse
when the duration is reached
Big fix:
- Reset method will now ignore any none number value passed to it and it will use the previous
startAt
value
Implemented enhancements:
autoResetKey
is a new prop that allows resetting the animation when the key changes. It works similar to React'skey
prop
Bug fix:
Fix an issue where resetting the animation once it was done when the isPlaying
was set to true did not start playing after the reset
Breaking Changes:
- The hook now returns an object with
elapsedTime
in seconds andreset
method, like so{ elapsedTime, reset }
durationSeconds
is renamed to justduration
. The duration is now set in secondsstartAt
now expects value in secondsonComplete
will receive as an argument thetotalElapsedTime
in seconds. The animation can now be repeated by returning an object instead of an array. The object may have the following params:shouldRepeat
indicates if the loop should start over;delay
- delay before looping again in seconds;newStartAt
set new start at value. |- Changing the
duration
while the loop is running will update the duration - if the new duration is more than the previous one, the measurement of the elapsed time will continue to the new duration; if the duration is less than the previous one, theonComplete
callback will be fired.
Implemented enhancements:
options.shouldResetOnDurationChange
can be set to reset elapsed time when the duration changes- the hook now returns
reset
method, which can be used to reset the elapsed time
Implemented enhancements:
- Refactor internals
- Add test coverage
Implemented enhancements:
- Add a new config option "startAt" to change the start time of the animation. Defaults to 0 if not provided
Implemented enhancements:
- Add TypeScript type definitions
Implemented enhancements:
- Add CHANGELOG.md to repo
Implemented enhancements:
config.isRepeated
is deprecated due to an issue to toggle it while the animation loop is running- Animation now can be repeated by returning an array
[shouldRepeat: boolean, delay: number]
fromconfig.onComplete
- Code samples are removed from ReadMe and replaced with buttons to edit on CodeSandbox