react-promenade/dist/index.d.ts

React components for crafting multi-step user flows

import React, { ReactNode } from 'react';

type PromenadeProviderProps = {
    /**
     * The children of the PromenadeProvider should be PromenadeStep components
     */
    children: ReactNode;
    /**
     * The total number of steps in the flow
     */
    stepCount: number;
    /**
     * Whether the next button should be disabled
     * @default () => false
     */
    isNextDisabled?: (index: number) => boolean;
    /**
     * Whether the back button should be disabled
     * @default () => false
     */
    isBackDisabled?: (index: number) => boolean;
    /**
     * Whether the next button is loading
     * @default () => false
     */
    isNextLoading?: (index: number) => boolean;
    /**
     * Whether the back button is loading
     * @default () => false
     * */
    isBackLoading?: (index: number) => boolean;
    /**
     * Callback for when the user clicks the back button
     */
    onBack?: (index: number) => void | Promise<void>;
    /**
     * Callback for when the user clicks the next button
     */
    onNext?: (index: number) => void | Promise<void>;
};
declare const PromenadeProvider: ({ children, stepCount, isNextDisabled, isBackDisabled, isNextLoading, isBackLoading, onBack, onNext }: PromenadeProviderProps) => React.JSX.Element;

type PromenadeStepProps = {
    index: number;
    children: React.ReactNode;
};
declare const PromenadeStep: ({ index, children }: PromenadeStepProps) => React.JSX.Element | null;

declare const usePromenade: () => {
    index: number;
    stepCount: number;
    isNextDisabled: boolean;
    isBackDisabled: boolean;
    isNextLoading: boolean;
    isBackLoading: boolean;
    goForward: () => void;
    goBack: () => void;
    cancelFlow: () => void;
};

export { PromenadeProvider, PromenadeStep, usePromenade };