useSequentFlow

Primary hook for creating and controlling a single flow host.

It returns:

• init — starts the flow
• SequentOutlet — the bound outlet component for that hook instance

Signature

function useSequentFlow<TResult = unknown>(): {
  init: (stepLoader: StepLoader, initialContext?: unknown) => void;
  status: "idle" | "active";
  result: SequentResult<TResult> | null;
  SequentOutlet: (props: SequentOutletProps) => ReactElement;
};

Example

import { useSequentFlow, useSequentStep } from "react-sequent";

function Step1() {
  const { advance } = useSequentStep();
  return <button onClick={() => advance(() => Step2)}>Next</button>;
}

function Step2() {
  const { resolve } = useSequentStep<string>();
  return <button onClick={() => resolve("done")}>Finish</button>;
}

function App() {
  const { init, status, result, SequentOutlet } = useSequentFlow<string>();

  const start = () => {
    init(() => Step1);
  };

  React.useEffect(() => {
    if (status === "idle" && result?.status === "resolved") {
      console.log(result.value);
    }
  }, [status, result]);

  return (
    <>
      <SequentOutlet />
      <button onClick={start}>Start</button>
    </>
  );
}

Notes

• One useSequentFlow() call creates one isolated flow host.
• SequentOutlet stays idle until init() is called.
• status reports whether a flow is currently active.
• result stores the latest terminal outcome (resolved or aborted).
• children, fallback, errorStep, chrome, and transition are configured on SequentOutlet.
• init() accepts any StepLoader, including factories that return JSX elements.
• init() throws if SequentOutlet is not currently mounted.