Wizard that renders a React component based on the steps you pass to it

Usage no npm install needed!

<script type="module">
  import telusTelusWizard from 'https://cdn.skypack.dev/@telus/telus-wizard';



version Build Status

A magical React component for builing step flows.



To include in your application:

npm install @telus/telus-wizard --save


Import the component:

import Wizard from '@telus/telus-wizard'

Pass it any components you like as direct children - Wizard displays the first one by default.

function MyWizard() {
  return (
      <FirstStep />
      <AnotherStep stepId="myCoolStep" />
      <LastStep />

// Displays `FirstStep` when the wizard mounts.

You can even map over an array to provide children:

function AnotherWiz() {
  return (
      {mySteps.map(step => <SomeComponent key={step.someIdProperty}>)}

// (Rememeber, React requires a unique `key` prop for each child)

Pass any other props you want to your steps:

function YetAnotherWiz({ someProp }) {
  return (
      <FirstStep custom={true} />
      <AnotherStep anything="you want!" />
      <LastStep testId="last-step-test" passedDown={someProp} />

Wizard Props

prop name description type required
children The components you want to render as steps in the wizard. array of React elements *
transition Pass false to disable CSS transitions (defaults to true) boolean

Step Props

Wizard passes these props to each of its direct children:

prop name description type
next Navigates to the next step, in the order steps were passed to Wizard function
previous Wizard remembers where you were! Navigates back one step in your history. function
goTo Navigates to any step by index (the first step is represented by the number 0), or stepId. function

Local Development

If you want to work locally on this package, run:

npm run setup-local

Github: @telus • Twitter: @telusdigital