react-f-your-wizard-ui

Reusable React component for creating multi-dimensional Wizard User Interfaces

Install

npm install --save react-f-your-wizard-ui

Usage

import React, { Component } from 'react'

import Wizard from 'react-f-your-wizard-ui'

class Example extends Component {
  render () {
    return (
      <Wizard
        steps={[ /* array of step definitions */]}
        showStep, // if step metadata (name, progressBar) should be displayed
        hideStepName={false}, // if step name should be hidden
        hideStepProgressBar={false}, // if Wizard Progress Bar should be hidden
        afterNavigationCallbackTimeout={150}, // delay in milliseconds before after navigation callback is invoked
      />
    )
  }
}

Step Definition

import { createStep } from 'react-f-your-wizard-ui';

const stepOne = createStep({
  afterNavigation = () => 'Function to call after navigation is complete',
  beforeFinalNavigation = () => 'Function to call before navigation is complete',
  beforeNextNavigation = () => 'Function to call before forward navigation is started',
  beforePrevNavigation = () => 'Function to call before backward navigation is started',
  cancelNextNavigation = () => 'return true if forward navigation should be canceled and no other navigation callbacks should be invoked',
  cancelPrevNavigation = () => 'return true if backward navigation should be canceled and no other navigation callbacks should be invoked ',
  gotoStep = () => 'function returning the index number of step to render when NEXT is clicked',
  onError = () => 'Function to call if error is thrown during step lifecycle',
  Comp = <div>Any valid JSX</div>,
  css = `Any valid CSS as a template string`,
})

License

MIT © noahehall