jungwoo3490 / use-funnel

A powerful and safe step-by-step state management library

@use-funnel

@use-funnel

A powerful and safe step-by-step state management library

@use-funnel is a React Hook that helps you easily implement complex UI flows.

Core Concepts

Strong Type Support

By comparing the type of the current step with the next, you can ensure that only the required states are managed safely.

State Management by History

Manage states based on history, making it easy to handle backward and forward navigation.

Various Router Support

Supports browser history, react-router-dom, next.js, @react-navigation/native, and more.

Example

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

export function App() {
  const funnel = useFunnel<{
    Step1: { message?: string; flag?: boolean };
    Step2: { message: string; flag?: boolean };
    Step3: { message: string; flag: boolean };
  }>({
    id: 'hello-world',
    initial: {
      step: 'Step1',
      context: {},
    },
  });
  return (
    <funnel.Render
      Step1={({ history }) => <Step1 onNext={(message) => history.push('Step2', { message })} />}
      Step2={({ context, history }) => (
        <Step2 message={context.message} onNext={(flag) => history.push('Step3', { flag })} />
      )}
      Step3={({ context }) => <Step3 message={context.message} flag={context.flag} />}
    />
  );
}

declare function Step1(props: { onNext: (message: string) => void }): React.ReactNode;
declare function Step2(props: { message: string; onNext: (flag: boolean) => void }): React.ReactNode;
declare function Step3(props: { message: string; flag: boolean }): React.ReactNode;

Visit use-funnel.slash.page for docs, guides, API and more!

English | 한국어

Contributing

Read our Contributing Guide to familiarize yourself with @use-funnel development process, how to suggest bug fixes and improvements, and the steps for building and testing your changes.

MIT © Viva Republica, Inc. See LICENSE for details.