react-f-your-wizard-ui

0.0.3 • Public • Published

react-f-your-wizard-ui

Reusable React component for creating multi-dimensional Wizard User Interfaces

NPM JavaScript Style Guide

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-f-your-wizard-ui

Weekly Downloads

1

Version

0.0.3

License

MIT

Unpacked Size

425 kB

Total Files

6

Last publish

Collaborators

  • noahedwardhall