Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

react-use-task

0.0.3 • Public • Published

react-use-task

☎️ React hook for managing async tasks/coroutines (with cancellation)

NPM Build Status Bundle Size

Why ?

True cancellation requires generator functions. This library was inspired by ember-concurrency and uses posterus to run generators as coroutines.

Usage

Tasks

import { useTask } from 'react-use-task'
 
const Demo = () => {
  const [ 
    { isRunning, performCount, last, lastSuccessful },
    perform,
    cancelAll
  ] = useTask(function* () {
    yield new Promise(r => setTimeout(r, 1000));
    return +new Date;
  });
 
  return (
    <div>
      <button onClick={perform}>
        Perform Task
      </button>
      <button onClick={cancelAll}>
        Cancel All
      </button>
      <div>
        isRunning: {'' + isRunning}, Perform count: {performCount}
      </div>
      <div>
        last: {JSON.stringify(last)}
      </div>
      <div>
        last success value: {lastSuccessful ? lastSuccessful.value : '<none>'}
      </div>
    </div>
  )
}

Workers (background tasks)

import { useWorker } from 'react-use-task'
 
const Demo = () => {
  useWorker(function* () {
    while (true) {
      console.log('tick');
      yield new Promise(r => setTimeout(r, 1000));
    }
  });
 
  return (
    <div>
      <div>Worker task will be automatically cancelled when component is unmounted</div>
    </div>
  )
}

Plans

  • Non-immediate running of task (e.g. on button press)
  • .drop, .restartable, .maxConcurrency task modifiers (like ember-concurrency)
  • Exposing manual cancellation
  • Historical state - last, lastSuccessful (like e-c)

Keywords

none

Install

npm i react-use-task

DownloadsWeekly Downloads

3

Version

0.0.3

License

MIT

Unpacked Size

46.1 kB

Total Files

22

Last publish

Collaborators

  • avatar