Overview

@use-funnel is a React Hook (opens in a new tab) that simplifies the implementation of complex UI flows.

In the example on the right, you can see a UI flow where users sequentially enter their occupation, school or company, and registration date. You can also move to the previous step by going back. Implementing such a complex UI flow requires managing step-by-step states and history.

With @use-funnel, this type of UI flow becomes easy to implement.

Concepts

Here are the key terms used in @use-funnel.

• step : When a user performs an input value for one action across multiple screens, each screen is called a "step". In the example on the right, these are the occupation, school or company, and registration date input screens.
• context : It is a state that stores the input values required for each step. In the example on the right, this refers to the values entered on each screen, such as occupation, school or company, and date.
• history : It is an array that contains the movement of steps in the funnel and the history of context changes in each Step. In the example on the right, this represents the complete record of the screens the user navigated through and the values entered at each step.