React Status Hooks - Trigger.dev | The open source background jobs framework

You can now create statuses in your Job code that lets you do some pretty cool stuff in your UI, like:

Show exactly what you want in your UI (with as many statuses as you want).
Pass arbitrary data to your UI, which you can use to render elements.
Update existing elements in your UI as the progress of the run continues.

Here's some example code showing for a Job that generates memes. We've created a single status generatingMemes (you can create as many as you like) and then we've updated it (you can update it as often as you like). It gives you fine-grained control over how you report progress and output data from your Job.

client.defineJob({
  id: "meme-generator",
  name: "Generate memes",
  version: "0.1.1",
  trigger: eventTrigger({
    name: "generate-memes",
  }),
  run: async (payload, io, ctx) => {
    const generatingMemes = await io.createStatus("generating-memes", {
      label: "Generating memes",
      state: "loading",
      data: {
        progress: 0.1,
      },
    });
    //...do stuff, like generate memes
    await generatingMemes.update("middle-generation", {
      state: "success",
      data: {
        progress: 1,
        urls: [
          "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZnZoMndsdWh0MmhvY2kyaDF6YjZjZzg1ZGsxdnhhYm13a3Q1Y3lkbyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/13HgwGsXF0aiGY/giphy.gif",
        ],
      },
    });
  },
});

Check out React Status Hooks in the docs.