VueCraft NPM

React Integration ​

Hooks for using PipelineOrchestrator and createRestClient() in React. Import from rest-pipeline-js/react (re-exports the core entry point too, so a single import covers both).

jsx
import { useRef } from 'react'
import {
  PipelineOrchestrator,
  usePipelineProgressReact,
  usePipelineRunReact,
} from 'rest-pipeline-js/react'

const orchestrator = new PipelineOrchestrator({
  config: {
    stages: [/* ... */],
  },
})

export function PipelineComponent() {
  const progress = usePipelineProgressReact(orchestrator)
  const [run, { running, result, error, abort, pause, resume, rerunStep, clearStageResults }] =
    usePipelineRunReact(orchestrator)

  return (
    <div>
      <div>Current stage: {progress.currentStage}</div>
      <button onClick={() => run()} disabled={running}>
        Start
      </button>
      <button onClick={() => abort()} disabled={!running}>
        Abort
      </button>
      <button onClick={() => pause()}>Pause</button>
      <button onClick={() => resume()}>Resume</button>
      {result && <div>Done: {JSON.stringify(result)}</div>}
      {error && <div>Error: {error.message}</div>}
    </div>
  )
}

usePipelineRunReact(orchestrator) ​

Run the pipeline and track its status/result.

Parameters ​

orchestrator: PipelineOrchestrator

Returns ​

[run, { running, result, error, stageResults, abort, pause, resume, rerunStep, clearStageResults }]

A tuple, mirroring the [state, actions] convention of hooks like useReducer. run/abort/pause/resume/rerunStep/clearStageResults are stable (useCallback-wrapped) — safe to use directly as event handlers without triggering extra re-renders.

usePipelineProgressReact(orchestrator) ​

Pipeline progress as React state.

Parameters ​

orchestrator: PipelineOrchestrator

Returns ​

PipelineProgress

usePipelineStageResultReact(orchestrator, stepKey) ​

Result of one specific stage — re-renders on every change to stageResults, not just once.

Parameters ​

  • orchestrator: PipelineOrchestrator
  • stepKey: string — key of the step to observe

Returns ​

PipelineStepResult | null

usePipelineStepEventReact(orchestrator, stepKey, eventType) ​

Subscribe to a specific step's event (success/error/progress).

Parameters ​

  • orchestrator: PipelineOrchestrator
  • stepKey: string
  • eventType: "success" | "error" | "progress"

Returns ​

any — last event payload.

usePipelineLogsReact(orchestrator) ​

Pipeline logs as React state.

Parameters ​

orchestrator: PipelineOrchestrator

Returns ​

log[]

useRerunPipelineStepReact(orchestrator) ​

Bound rerunStep for one orchestrator, convenient to pass directly as an event handler.

Parameters ​

orchestrator: PipelineOrchestrator

Returns ​

(stepKey: string, options?) => Promise<...> — orchestrator.rerunStep bound to orchestrator.

useRestClientReact(config) ​

Memoized RestClient — recreated when config is a new object reference.

Parameters ​

config: HttpConfig — same shape as createRestClient()'s config. Memoize it yourself (useMemo/useState/module-level constant) to avoid recreating the client every render.

Returns ​

RestClient