React Promenade

Headless React components for crafting multi-step user flows

Installation · Documentation · Author

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

npm i react-promenade
# or
pnpm add react-promenade
# or
yarn add react-promenade
# or
bun add react-promenade

Example

import { PromenadeProvider, PromenadeStep, usePromenade } from 'react-promenade';

function Signup() {
  return (
    <PromenadeProvider
      stepCount={3}
      isBackDisabled={(index) => { return index === 0 }}
      isNextDisabled={(index) => { return false }}
      isBackLoading={(index) => { return false }}
      isNextLoading={(index) => { return false }}
      onBack={(index) => { console.log('back clicked on step', index) }}
      onNext={(index) => { console.log('next clicked on step', index) }}
    >
      <PromenadeStep index={0}><EmailStep /></PromenadeStep>
      <PromenadeStep index={1}><AvatarStep /></PromenadeStep>
      <PromenadeStep index={2}><AboutMeStep /></PromenadeStep>
    </PromenadeProvider>
  )
}

function EmailStep() {
  const { isBackDisabled, isNextDisabled, goBack, goForward } = usePromenade()

  return (
    <div>
      <h1>Step 1</h1>
      <button onClick={goBack} disabled={isBackDisabled}>Back</button>
      <button onClick={goForward} disabled={isNextDisabled}>Next</button>
    </div>
  )
}

View full documentation and examples under ./docs.

Author

Gus @gdbroman (reach out for questions or feedback)