react-formdata-wizard

React wizard that maintains step state and form data for you. Form data is automagically saved to the local storage of the browser, so you don't have to worry about reloads or any other ram-state destroying event.

Install

npm install --save react-formdata-wizard

Usage

import React, { Component } from 'react'

import FormdataWizard from 'react-formdata-wizard'
import 'react-formdata-wizard/dist/index.css'

class Example extends Component {
  render() {
    return (
      <FormdataWizard>
        <Step0/>
        <Step1/>
        ...
      </FormdataWizard>
  )
  }
}

General Ethos

This package does NOT render any UI by itself. It doesn't have any buttons, nor does it specify fancy transitions. What it will do is maintain the current step progress and any form data you give to it. The form data passed in is persisted into the browsers local storage until the form is either started over or reset.

Child internal state

The actual step rendered is a clone of the child representing the current step. For this reason children cannot maintain their own state, and should use the form data instead of useState or useReducer

Props accepted by the Wizard

Property Name | Property Description | Required --- |---------------------------------------------------------------------------------------------------------------------------------------------------------------------------| --- name | the 'name' of the wizard. Should be unique as it will determine the local storage key used | Y onStartOver | function called with zero arguments that is called when the form is started over without completing | N onFinish | function called with either the form data or a specific return value that is called when the form finishes normally | N resetSetter | function that will be called with a variable containing a function that can reset the wizard. This allows higher level components to cause a reset for their own reasons. | N defaultFormData | default form data to apply on creation if nothing is stored locally. | N useLocalStorage | whether to back the wizard with local storage or not | Y startStep | the step to start the wizard from. Used if some steps are no longer needed | N

Props provided to All Children

Property Name | Property Description --- | --- currentStep | the 0-indexed step number we're on totalSteps | the number of steps we have formData | the current form data accumulated so far updateFormData | function that takes an update object and merges the existing formdata with the update object clearFormData | function that resets the form data to the empty object nextStep | function that advances the wizard by increment steps where increment defaults to one previousStep | function that regresses teh wizzard to the previous step startOver | function that calls onStartOver and then resets the wizard to the initial state active | boolean that tells the step if it is the currently active step finish | function taking one optional argument that calls the provided onFinish with that argument, or if not provided the current form state, then resets the wizard to the initial state

License

GPLv3 © Uclusion Inc, 2020 BFUculsion