Auto-Dismissing Toast

A fixed-position toast notification that appears in the lower-right corner and auto-dismisses after 5 seconds. This is not a primary use case for react-sequent — toasts are typically handled by a dedicated notification library. However, if your goal is minimizing dependencies, the library accommodates this pattern elegantly: a step can call resolve from inside a useEffect, making the flow self-terminating without any external timer management.

Click Show Toast below to try it.

Result

Loading...

Live Editor

How the self-dismissing step works

ToastStep calls resolve inside a useEffect with a 5-second timeout. Because resolve ends the flow, the outlet unmounts the step and clears the chrome — no external state, no manual cleanup beyond the standard clearTimeout teardown:

function ToastStep() {
  const { resolve } = useSequentStep();
  const { context: ctx } = useSequentContext();
  const [remaining, setRemaining] = useState(5);

  useEffect(() => {
    const timeoutId = setTimeout(() => resolve("dismissed"), 5000);
    const intervalId = setInterval(() => {
      setRemaining((s) => {
        if (s <= 1) {
          clearInterval(intervalId);
          return 0;
        }
        return s - 1;
      });
    }, 1000);

    return () => {
      clearTimeout(timeoutId);
      clearInterval(intervalId);
    };
  }, [resolve]);

  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <div>{ctx.message}</div>
      <div style={{ opacity: 0.85, fontSize: 12 }}>{remaining}s</div>
    </div>
  );
}

The chrome positions the outlet in the corner without knowing anything about timing — it only renders while the flow is active:

<SequentOutlet
  chrome={(slot) => (
    <div style={{ position: "fixed", bottom: 24, right: 24, zIndex: 1000 }}>
      {slot}
    </div>
  )}
/>

The toast() helper seeds context with the message and starts the flow. Consumers can react to dismissal by observing status and result from useSequentFlow().

Key points

• Self-terminating step — resolve called from useEffect after a delay ends the flow without any external timer or state.
• Chrome is the container — positioning and z-index live in the chrome, keeping the step itself presentational.
• Reactive completion — callers can react after dismissal by checking status === "idle" and result?.status === "resolved".
• Not a replacement for a toast library — dedicated libraries offer queuing, stacking, and animation out of the box. Use this approach when you specifically want to avoid adding a dependency.