Add feature: allow the option to pass an array of consecutive delay values to the `delay` option of `useTimer`
Many playback elements (that might have use for a precision timer) have a set of fixed known timestamps where events or UI changes are triggered. Things like slides, carousels, video sections, etc. Setting up the timer so that delay changes while the timer is playing (without interrupting the timer) can create challenges and code/render overhead.
For example, in one of my projects, I tried various options and I did end up with working solutions. However, I realized that all the code I added to my components render functions really belong inside of the useTimer! My solution looked a lot like I was working around the constraints/limitations of useTimer instead of my application. My workaround also made my code harder to maintain and harder to follow, etc.
So I solved my issues in a better way by adding a couple of features to useTimer:
- Added the option to pass an array of values to
options.delay. So now:
export interface TimerOptions {
/** Amount of time to wait before firing the timer, in milliseconds. Use `undefined` or `0` if you'd like the timer to behave as a stopwatch, never firing. */
delay?: number | number[];
//...
}
This required changes to how delay is set and changes to the useEffect that fires the callback.
2. Added an argument to the start() function to allow changing starting position in the delay array. This allows for navigating to different timestamps in my app.
Note: I originally also added a startIndex to TimerOptions but later removed it because it promotes poor/inefficient solutions such as creating a new useTimer (with new startIndex) just to change play position. The better way is to provide a delayIndex value to the start function. Like for example,
timer.start(undefined, 2); //start at 3rd position (start with 3rd value in delay array)
With these added features I was able to maintain a single stable timer object while changing delays during uninterupted play.
Because this was useful to me and likely useful in many other scenerios, I thought I would make this pull request so that others may benefit from this open-source react utility library.
I forgot to mention that the changes I made (additions) should not be breaking changes. In fact, I structured the code I added so that it is clear the previous code gets executed when the new options are not used.
I also updated a bunch of packages so there should be 0 vulnerabilities.