⏰ React-on-time
Power timers to play schedule like a fiddle.
Renderless timers and intervals for delayed rendering, complex animation and orchestration.
This works like a music on sheets. Mount -> wait -> fire -> unmount.
Super simple and predictable, but gives you ability to construct any animations "flow" you might need.
API
Timeout
- Timer, which will execute only once.
- took
timeout
as timer duration, then
as optional callback and optional children as a render prop.
; <Timeout timeout=1000 then=doSomething/> <Timeout timeout=1000> timedout && <RenderSomething /></Timeout>
Interval
- Periodical timer. Never stops.
- tooks delay is interval duration
onTick
or renderprop as a callback
; <Interval delay=1000 onTick= /> <Interval delay=1000> <span>#tick</span> </Interval>
Stopwatch
- Continuous progress tracker, counting from 0 to 1. Based of request animation frame, could be used for animations.
- tooks
timeout
as duration, and start callingonTick
or children every frame.
; <Stopwatch timeout=1000 onTick= /> <Stopwatch timout=1000> <span>#Math</span> </Stopwatch>
Era
- something which starts and ends. (Requires React 16 to work)
- had
onStart
andonEnd
handlers - accepts "normal" childrens
; <Era onStart=doSomething onEnd=doSomething> <Timer /> <Interval /></Stopwatch>
Power usage
;; <Value initial=0> <ReactFragment> // mount Timer on sequence 0 value === 0 && <Timeout timeout=100 then= /> // on sequence 1 mount timer, and sub-timer value === 1 && <Fragment> <Timeout timeout=1000 then= /> <Timeout timeout=100> timedOut && // this block will be mounted 100ms after <Era onStart=doSomething onEnd=doSomething> <Timeout timeout=100 then=doSomething/> <Timeout timeout=200 then=doSomething/> <Timeout timeout=300 then=doSomething/> </Era> </Timeout> </Fragment> // sets some values to "state" value===2 && <Interval duration=100 onTick= /> // when state[10] is set - change sequence, killing interval state10 && <div> current phase is value</div> </ReactFragment> </Value>
Licence
MIT