⏰ 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

1. Timeout - Timer, which will execute only once.
   • took timeout as timer duration,
   • then as optional callback and optional children as a render prop. `js import {Timeout} from 'react-on-time';

1. Interval - Periodical timer. Never stops.
   • tooks delay is interval duration
   • onTick or renderprop as a callback `js import {Interval} from 'react-on-time';

<Interval delay={1000} onTick={tick => doSomething(tick)}/>

1. 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 calling onTick or children every frame. `js import {Stopwatch} from 'react-on-time';

<Stopwatch timeout={1000} onTick={progress => doSomething(progress)}/>

1. Era - something which starts and ends. (Requires React 16 to work)
   • had onStart and onEnd handlers
   • accepts "normal" childrens `js import {Era} from 'react-on-time';

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