Creating a Funnel within a Funnel

When developing a funnel, you may need to go through multiple steps to achieve a particular state. Alternatively, you might need to reuse a portion of the funnel steps in another context. In these situations, dividing the funnel into sub-funnels can be an efficient approach. The flowchart would looks like this:

@use-funnel supports sub-funnels. You simply need to specify a different id when using useFunnel() in the components with in a particular step.

import { useFunnel } from '@use-funnel/react-router-dom';

import { BFunnel } from './BFunnel';

export function Example() {
  const funnel = useFunnel<{
    A: { a?: string; b?: string };
    B: { a: string; b?: string };
    C: { a: string; b: string };
  }>({
    id: 'main-funnel',
    initial: {
      step: 'A',
      context: {},
    },
  });
  return (
    <funnel.Render
      A={({ history }) => (
        <div>
          <h1>A Step</h1>
          <button onClick={() => history.push('B', { a: 'a' })}>Next</button>
        </div>
      )}
      B={({ context, history }) => (
        <div>
          <h1>B Step</h1>
          <BFunnel a={context.a} onNext={(b) => history.push('C', { b })} />
        </div>
      )}
      C={({ context }) => (
        <div>
          <h1>C Step</h1>
          <p>a: {context.a}</p>
          <p>b: {context.b}</p>
        </div>
      )}
    />
  );
}

Open Sandbox

Step-by-Step Definition of context Creating a Custom Router