Run Multistep Workflows with react-use-workflow

Update: public github and npm package.

React-workflow is a lightweight framework to automate multi-step workflows. I designed it to streamline multi-step Web3.js transactions, but it can be used for any multi-step React workflow.

Here's a demo with a three-step workflow:

Video for https://omarish-assets.s3.us-east-1.amazonaws.com/images/2020-10-28/react-workflow-demo.webm is loading
  • In this example, the first step waits for a response from metamask.
  • Optionally, you can pass in a function that waits for an event to be emitted on chain. Or runs some other logic to make sure a result happened.
  • The second and third steps set short timeouts and then resolve.

How to use react-use-workflow

There are two parts to adding a react-use-workflow:

  1. Define the workflow using the createWorkflow helper
  2. Add the workflow to a React component

Define the workflow using createWorkflow:

2. Mount the workflow using useWorkflow

Use the useWorkflow React hook to mount the workflow in a component.

Proposed type definitions: these are a little hand-wavey, but I'll firm them up if there's enough demand for this library:

Want to use this?

githubnpm package

© 2023 | RSS | @omarish