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