funnel.Render Component

The funnel.Render component is responsible for rendering each step of the funnel.

It is included in the UseFunnelResults returned by useFunnel().

interface FunnelRenderComponent<T> extends React.ComponentType<FunnelRenderProps<T>> {
  with: FunnelRenderWithEvent<T>;
  overlay: FunnelRenderOverlay<T>;
};

• FunnelRenderProps
• FunnelRenderWithEvent
• FunnelRenderOverlay

FunnelRenderProps

Specifies the rendering logic for each step.

interface FunnelRenderProps<T> {
  [key in keyof T]: (props: {
    context: T[key];
    history: FunnelHistory<T, key>;
  }) => React.ReactNode;
}

• context (object): An object representing the state of the current step.
• history (object): An object managing the transitions of the funnel. Use it to move to the next step or return to the previous step. For more information, see FunnelHistory.

Example

In the following example demonstrates how to define the rendering logic for each step (EmailInput, PasswordInput, OtherInput) and pass the necessary data for each step. You can access the data for each step using context and move to the next step using history.

import { useFunnel } from "@use-funnel/next";
 
const funnel = useFunnel(/* ... */);
return (
  <funnel.Render
    EmailInput={({ history }) => (
      <EmailInput onNext={(email) => history.push('PasswordInput', { email })} />
    )}
    PasswordInput={({ context, history }) => (
      <PasswordInput
        email={context.email}
        onNext={(password) => history.push('OtherInput', { password })}
      />
    )}
    OtherInput={() => <OtherInput />}
  />
);

FunnelRenderWithEvent

Enables the definition of an event object for multiple transitions within the current step.

interface FunnelRenderWithEvent<T> {
  events: {
    [eventName: string]: (payload: any, funnel: { context: T; history: FunnelHistory<T> }) => void;
  };
  render: (props: {
    context: T;
    dispatch: (eventName: string, payload: any) => void;
  }) => React.ReactNode;
}

• events (object): An object containing event handlers for each event name.
  • eventName (string): The name of the event.
  • payload (any): The data passed to the event handler.
  • funnel (object): An object containing the current step state and the funnel history. Use it to access the current state and manage transitions.
    • context (object): An object representing the state of the current step.
    • history (object): An object managing the transitions of the funnel. Use it to move to the next step or return to the previous step. For more information, see FunnelHistory.
• render (function): A function that returns a React node.
  • context (object): An object representing the state of the current step.
  • dispatch (function): A function that dispatches an event.
    • eventName (string): The name of the event.
    • payload (any): The data passed to the event handler.

Example

<funnel.Render
  EmailInput={funnel.Render.with({
    events: {
      EmailInputSuccess: (email: string, { history }) => history.push('PasswordInput', { email }),
      EmailInputFail: (error: Error, { history }) => history.push('ErrorStep', { error: error.message })
    },
    render({ context, dispatch }) {
      return (
        <EmailInput
          email={context.email}
          onNext={(email) => dispatch('EmailInputSuccess', email)}
          onError={(error) => dispatch('EmailInputFail', error)}
        />
      );
    }
  })}
/>

For more detailed instructions, see the Define transition event (opens in a new tab).

FunnelRenderOverlay

This option allows you to display the previous step on the same screen when displaying the current step, you can use this option.

type FunnelRenderOverlay<T> =
  | FunnelRenderOverlayWithoutEvent<T>
  | FunnelRenderOverlayWithEvent<T>;
 
interface FunnelRenderOverlayWithoutEvent<T> {
  render: (props: {
    context: T;
    history: FunnelHistory<T>;
    close: () => void;
  }) => React.ReactNode;
}
 
interface FunnelRenderOverlayWithEvent<T> {
  events: {
    [eventName: string]: (payload: any, funnel: { context: T; history: FunnelHistory<T> }) => void;
  };
  render: (props: {
    context: T;
    dispatch: (eventName: string, payload: any) => void;
    close: () => void;
  }) => React.ReactNode;
}

FunnelRenderOverlayWithoutEvent

• render (function): A function that returns a React node.
  • context (object): An object representing the state of the current step.
  • history (object): An object managing the transitions of the funnel. Use it to move to the next step or return to the previous step. For more information, see FunnelHistory.
  • close (function): A function that closes the overlay.

FunnelRenderOverlayWithEvent

• events (object): An object containing event handlers for each event name.
  • eventName (string): The name of the event.
  • payload (any): The data passed to the event handler.
  • funnel (object): An object containing the current step state and the funnel history. Use it to access the current state and manage transitions.
    • context (object): An object representing the state of the current step.
    • history (object): An object managing the transitions of the funnel. Use it to move to the next step or return to the previous step. For more information, see FunnelHistory.
• render (function): A function that returns a React node.
  • context (object): An object representing the state of the current step.
  • dispatch (function): A function that dispatches an event.
    • eventName (string): The name of the event.
    • payload (any): The data passed to the event handler.
  • close (function): A function that closes the overlay.

Example

<funnel.Render
  TermsAgree={funnel.Render.overlay({
    render({ context, history, close }) {
      return (
        <TermsAgree
          email={context.email}
          onNext={(email) => history.push('PasswordInput', { email })}
          onClose={() => close()}
        />
      );
    }
  })}
/>

For more detailed instructions, see the Use overlay (opens in a new tab).