Introduction

React Promenade is an unstyled component library that makes it easy to create multi-step user flows with step-by-step validation and navigation.

Why Multi-Step User Flows?

Breaking big forms into multi-step user flows will almost always:

• improve UX
• increase user engagement
• boost signups & completion rates

Installation

1npm i react-promenade
2# or
3pnpm add react-promenade
4# or
5yarn add react-promenade
6# or
7bun add react-promenade

Example

1import { PromenadeProvider, PromenadeStep, usePromenade } from 'react-promenade';
2
3function Signup() {
4  return (
5    <PromenadeProvider
6      stepCount={3}
7      isBackDisabled={(index) => { return index === 0 }}
8      isNextDisabled={(index) => { return false }}
9      isBackLoading={(index) => { return false }}
10      isNextLoading={(index) => { return false }}
11      onBack={(index) => { console.log('back clicked on step', index) }}
12      onNext={(index) => { console.log('next clicked on step', index) }}
13    >
14      <PromenadeStep index={0}><EmailStep /></PromenadeStep>
15      <PromenadeStep index={1}><AvatarStep /></PromenadeStep>
16      <PromenadeStep index={2}><AboutMeStep /></PromenadeStep>
17    </PromenadeProvider>
18  )
19}
20
21function EmailStep() {
22  const { isBackDisabled, isNextDisabled, goBack, goForward } = usePromenade()
23
24  return (
25    <div>
26      <h1>Step 1</h1>
27      <button onClick={goBack} disabled={isBackDisabled}>Back</button>
28      <button onClick={goForward} disabled={isNextDisabled}>Next</button>
29    </div>
30  )
31}

View full documentation and examples under ./docs.

Author

• Gus @gdbroman (reach out for questions or feedback)