@telus/telus-wizard NPM

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