React Coroutine

To install React Coroutine in your project, use NPM or Yarn. The lib is available as react-coroutine:

# using npm
npm install --save react-coroutine

# or using yarn
yarn add react-coroutine

The library has React defined as a peer dependency. This means, you need to install React separately. React Coroutine follows semantic versioning so no breaking changes should be expected between minor or patch releases.

Whenever you want to define React component using generator, async generator, or async function, you need to import the factory function that is used in the same way as you use other higher-order components. No options or specific arguments required, just a coroutine that defines the workflow and outputs JSX.

// UserProfilePage.js
import React from 'react';
import Coroutine from 'react-coroutine';

export default Coroutine.create(UserProfilePage);

async function UserProfilePage({ userId }) {
  let userInfo = await retrieveUserInfo(userId);
  let { default: UserProfile } = await import('./UserProfile');
  return <UserProfile data={userInfo} />;
}

Once defined, the component can be used in the same way as stateless components are used. For example, the use of component above as a root of a route definition (using React Router).

// App.js
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import UserProfilePage from './UserProfilePage';

export default function App() {
  return (
    <BrowserRouter>
      <Route path="/users/:userId">
        {match => <UserProfilePage userId={match.params.userId} />}
      </Route>
    </BrowserRouter>
  );
}