@telus/telus-wizard

telus-wizard

A magical React component for builing step flows.

🧙‍♂️🧙‍♀️

Install

To include in your application:

npm install @telus/telus-wizard --save

Usage

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 (
    <Wizard>
      <FirstStep />
      <AnotherStep stepId="myCoolStep" />
      <LastStep />
    </Wizard>
  )
}

// Displays `FirstStep` when the wizard mounts.

You can even map over an array to provide children:

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

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

Pass any other props you want to your steps:

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

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