@pengoose/funnel

🚀 Funnel

* Illustration created by coalowl

Installation

Install the package using npm:

npm install @pengoose/funnel

Or using yarn:

yarn add @pengoose/funnel

Usage Example

Constants

// example/constants.ts
export const STEP = {
  INITIAL_STEP: 'addId',
  ADD_NAME: 'addName',
  ADD_NUMBER: 'addNumber',
  ADD_EXPIRATION: 'addExpiration',
  ADD_CVV: 'addCvv',
  CONFIRM: 'confirm',
} as const;

export const INITIAL_DATA = {
  id: '',
  name: '',
  number: '',
  expiration: '',
  cvv: '',
} as const;

Types

// example/types.ts
export type Step = (typeof STEP)[keyof typeof STEP];
export type Data = typeof INITIAL_DATA;

Funnel

// example/funnel.ts
import { createFunnel } from '@pengoose/funnel';
import { STEP, INITIAL_DATA } from '@/constants';

export const Funnel = createFunnel<Step, Data>({
  initialStep: STEP.INITIAL_STEP,
  initialData: INITIAL_DATA,
});

Usage

// example/AddCard.tsx
import { Funnel } from '@pengoose/funnel';

export const Funnels = () => {
  const { step, setStep } = Funnel.useContext();

  return (
    <Funnel>
      {/* Step1 */}
      <Funnel.Step step={STEP.INITIAL_STEP}>
        <AddId />
      </Funnel.Step>

      {/* Step2 */}
      <Funnel.Step step={STEP.ADD_NAME}>
        <AddName />
      </Funnel.Step>

      {/* ...Steps */}
    </Funnel>
  );
};

// example/AddId.tsx
import { Funnel } from '@pengoose/funnel';
import { STEP } from '@/constants';

export const AddId = () => {
  const { data, setData, setStep } = Funnel.useContext();

  const nextStep = () => {
    setStep(STEP.ADD_NAME);
  };

  return (
    <div>
      <input
        type='text'
        value={data.id}
        onChange={(e) => setData({ id: e.target.value })}
      />
      <button onClick={nextStep}>Next</button>
    </div>
  );
};