Getting Started

Manzil is a progress bar with steps for React. View the source on GitHub, use it as a controlled component, or control it with the turnkey useStepProgress hook.

Installation

Install the component from your command line.

Terminal

npm i manzil

Basic Usage

Pass steps and value. Nodes render step markers by default, or interactive buttons when you provide onStepClick.

Status.tsx

import { StepProgress } from 'manzil'

function Status({ step }) {
  return (
    <StepProgress
      steps={['Create', 'Configure', 'Review', 'Launch']}
      value={step}
    />
  )
}

Turnkey Hook (useStepProgress)

Control stepper state without boilerplate using the built-in React hook:

CheckoutWizard.tsx

import { StepProgress, useStepProgress } from 'manzil'

const steps = ['Cart', 'Shipping', 'Payment', 'Confirm']

function CheckoutWizard() {
  const { props, next, prev, isFirst, isLast } = useStepProgress({ steps })

  return (
    <div>
      <StepProgress {...props} />
      <div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
        <button onClick={prev} disabled={isFirst}>Back</button>
        <button onClick={next} disabled={isLast}>Next</button>
      </div>
    </div>
  )
}

Async Operations (stepProgress.promise)

Trigger spinners and active shimmer automatically during async operations:

promise.ts

import { stepProgress } from 'manzil'

"cm">// Automatically sets current step to 'ongoing' (spinner + shimmer)
"cm">// and advances to the next step upon resolution!
await stepProgress.promise(submitPayment(), {
  loading: 'Processing payment...',
  advanceOnSuccess: true,
})

NextStepProgress (API)