react-suspense-saga

Overview

A React component that renders the results of an ES2015 generator.

The suspense is killing me, so I decided to explore this before React implements it themselves!

Getting started

Install

npm i react-suspense-saga

or

yarn add react-suspense-saga

Quick Example

import runner from 'react-suspense-saga'
import { call, render } from 'react-suspense-saga/effects'
 
import Api from './Api'
 
function* greeter() {
  try {
    yield render(
      <p>Loading...</p>
    )
    const user = yield call(Api.fetchUser)
    yield render(
      <p>
        Hello {user.name}!
      </p>
    )
  } catch(e) {
    yield render(
      <p>
        Oh no, something failed!
      </p>
    )
  }
}
 
export default runner(greeter)

Demos

API Documentation

Call

call(
  func: (...args: Array<any>) => Promise<any>,
  ...args: Array<any>
): Effect

This will instruct the runner to return the results of the promise back to the generator when it resolves or rejects.

eg.

const AsyncGreeting = runner(function*() {
  yield render(<p>Loading...</p>)
  try {
    const response = yield call(fetch, '/api/user')
    const user = yield call(() => response.json())
    yield render(<p>Hello { user.name }!</p>)
  } catch(e) {
    yield render(<p>Something went wrong 🤔</p>)
  }
})

delay

delay(
  ms: number
): Effect

This will instruct the runner to use setTimeout.

eg.

const MyComponent = runner(function*() {
  yield delay(1000)
  yield render(<p>my component</p>)
})

render

render(
  node: React.Node | React.Component,
  extraArgs: Object?
): Effect

This will render a node or a react component.

eg.

const Loading = () => <p>Loading...</p>
 
const MyComponent = runner(function*() {
  yield render(Loading) // props for MyComponent will get forwarded to this
  yield render(<p>my component</p>)
})

takeProps

takeProps(): Effect

This is a blocking effect, that will not advance the generator until the props have changed.

You can use this with redux, or any component that will change the props like this:

const AsyncGreeting = runner(function*() {
  // the while true is so that the generator runs forever
  while (true) {
    const { loading, name } = yield takeProps()
    if (loading) {
      yield render(<p>Loading...</p>)
    } else {
      yield render(<p>Hello {name}</p>)
    }
  }
})