Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/thekashey/react-queue

⛓ Declarative task scheduler
https://github.com/thekashey/react-queue

exection queue scheduler sequence task

Last synced: about 1 month ago
JSON representation

⛓ Declarative task scheduler

Awesome Lists containing this project

README 

        


  
React ⏳ Queue


  


  A declarative scheduler

  


    

  

   

  

  

  

     

   

   

   

     

   



  
  

  



To schedule events one-after another. To play _lazy_ animations in order, correlated with their position on the page.



# API

## Scheduler

- `Scheduler` - task scheduler. Collect tasks and execute them with `stepDelay` between in the `priority` order.

  - `stepDelay` - delay between two events

  - `[reverse]` - reverses the queue

  - `[source]` - priority calculation function

  - `[withSideEffect]` - indicates that Scheduler has  side effects, and enabled auto update(re-render) on task execution. __Affects performance__. 

  - `[observe]` - cache buster property. Scheduler sorts queue only on element change, in case of using `source` you might need "inform"

  - `[noInitialDelay]` - remove delay from the first task.

  - `[disabled]` - disables ticking

  it to resort queue.

  

  

```js

import {Scheduler} from 'react-queue';



  {channel => .... }



// use source to create priority based on element position on the page

 ref.getBoundingClientRect().top} />

```

`channel` also provides `channel.reset()` function, to clear all `executed` bits, and start everything from the scratch.



## Queue

- `Queue` - queued event. It just got executed, nothing more. "When", in "when order" - that is the question.

  - `channel` - channel acquired from Scheduler

  - `callback` - callback to execute. In case if callback will return a number, or a promise resolving to number, it would be used to _shift_ delay to the next step.

  - `priority` - pririty in queue, where 0-s should be executed before 1-s.

  - [`shift`] - sub priority change. `shift={-1}` will swap this task with previous sibling.

  - [`disabled`] - holds queue execution (sets priority to Infitity).

  next tick will be moved by {number}ms. In case of just Promise - next tick will wait to for promise to be resolved.

  - [`children`] - any DOM node, Queue will pass as `ref` into scheduler's `source` 



```js

import {Scheduler, Queue} from 'react-queue';



    {channel => 

      

      

      // this one will report `ref` to the scheduler

      

        
42


        

         

       this.setState({x: 1})}>

        
 1 {x == 1 && "selected!!"}


      



       this.setState({x: 2})}>

        
 2 {x == 2 && "selected!!"}


      



       this.setState({x: 3})}>

        
 3 {x == 3 && "selected!!"}


      

    }



```



## FlattenPriorityGroup

- `FlattenPriorityGroup` - "flattens" all priority changes inside. Could help manage nested tasks.

  - `channel` - channel acquired from Scheduler

  - [`children`] - render function  

  - [`priority`] - task priority. Would be set for all nested tasks.

  - [`shift`] - sub priority change. `shift={-1}` will swap this task with previous sibling.

  - [`disabled`] - holds queue execution (sets priority to Infitity).

  

In the next example executing order would be - 2, 1, 4, 3.

```js

 

   {channel => (

      

          

          { pchannel => [

            1,

            2

          ]}

          

          

          { pchannel => [

             3,

             4

          ]}

          

      

   )}  

   

``` 



## Promised

- `Promised` - promised event. Once it started it should all `done` when it's done. This is a more complex form of queue, with much stronger feedback.

  - `channel` - channel acquired from Scheduler

  - [`children`] - render function

  - [`autoexecuted`] - auto "done" the promised. boolean or number. If number - would be used to shift next step.

  - [`priority`] - task priority. Lower goes first

  - [`shift`] - sub priority change. `shift={-1}` will swap this task with previous sibling.

  - [`disabled`] - holds queue execution (sets priority to Infitity).

```js

import {Scheduler, Promised} from 'react-queue';

import {Trigger} from 'recondition';



    {channel => 

      

      {({executed, active, done, forwardRed}) => (

        


          {executed && "task is done"}

          {active && "task is running"}

          // don't call anything in render

           done(42/* make next step by 42ms later*/)}/>

        


      )

            

    }



// this code has the same behavior



    {channel => 

      

      {({executed, active, done, forwardRed}) => (

        


          {executed && "task is done"}

          {active && "task is running"}          

        


      )

            

    }



```  



For example - animation - it will execute one `Promised` after another, and triggering waterfall animation.

```js

import {Scheduler, Promised} from 'react-queue';

import {Trigger} from 'recondition';



    {channel => 

      

      {({executed, active, fired}) => (
Line1
)}

            

      

      

      {({executed, active, fired}) => (
Line2
)}

            



      

      {({executed, active, fired}) => (
Line3
)}

            



      

      {({executed, active, fired}) => (
Line4
)}

            

    }



```  



## Examples

[react-remock + react-queue](https://codesandbox.io/s/q89q2jm8qw) - simple and complex example - "jquery like" image lazy loading with queued execution.

[react-visibility-sensor + react-queue](https://codesandbox.io/s/6xvr42y6xr) - animate element appearance based on visibility check.



# Licence

 MIT