⏰ 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
timeoutas timer duration, thenas optional callback and optional children as a render prop.
import {Timeout} from 'react-on-time';
<Timeout timeout={1000} then={doSomething}/>
<Timeout timeout={1000}>
{ timedout => timedout && <RenderSomething />}
</Timeout>Interval- Periodical timer. Never stops.
- tooks delay is interval duration
onTickor renderprop as a callback
import {Interval} from 'react-on-time';
<Interval delay={1000} onTick={tick => doSomething(tick)}/>
<Interval delay={1000}>
{ tick => <span>#{tick}</span> }
</Interval> Stopwatch- Continuous progress tracker, counting from 0 to 1. Based of request animation frame, could be used for animations.
- tooks
timeoutas duration, and start callingonTickor children every frame.
import {Stopwatch} from 'react-on-time';
<Stopwatch timeout={1000} onTick={progress => doSomething(progress)}/>
<Stopwatch timout={1000}>
{ progress => <span>#{Math.round(100*progress)}</span> }
</Stopwatch> Era- something which starts and ends. (Requires React 16 to work)
- had
onStartandonEndhandlers - accepts "normal" childrens
import {Era} from 'react-on-time';
<Era onStart={doSomething} onEnd={doSomething}>
<Timer />
<Interval />
</Stopwatch> Power usage
import {Value} from 'react-powerplug';
import {Timeout, Era} from 'react-on-time';
<Value initial={0}>
{({value, set}) => (
<React.Fragment>
// mount Timer on sequence 0
{ value === 0 && <Timeout timeout={100} then={() => set(1)}/>}
// on sequence 1 mount timer, and sub-timer
{ value === 1 &&
<Fragment>
<Timeout timeout={1000} then={() => set(1)}/>
<Timeout timeout={100}> {
timedOut => 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={tick => setState({[tick]:true})}/>}
// when state[10] is set - change sequence, killing interval
{ state[10] && setValue(3)}
<div> current phase is {value}</div>
</React.Fragment>
)}
</Value> Licence
MIT