Multi Step Manager

A component or hook that manages navigation. Provides the current step, as well as to and back functions to navigate.

Inspiration: Routeless non sequential UIs, modal driven confirmation steps.

Install

yarn add @procore/labs-multi-step-manager

Import

import {
  // a hook to push history onto an array
  useMultiStepManager,
  // a component with a render prop of the hook
  MultiStepManager,
  // a component that keys into its child object
  MultiStepManagerRenderFromObject,
} from '@procore/labs-multi-step-manager';

Usage

function Example() {
  const { current, to } = useMultiStepManager({ initialStep: 'ONE' });

  return (
    <MultiStepManagerRenderFromObject current={current}>
      {{
        ONE: <Button onClick={to('NEXT')}>Next</Button>,
        NEXT: <Button onClick={to('ONE')}>Restart</Button>,
      }}
    </MultiStepManagerRenderFromObject>
  );
}