yeaformikwizard v0.1.6

Yet Another formik wizard

This is a formik wizard aimed to be easy to use (also, this is my first npm package, please be gentle... ?

Installation

Use npm npm to install yeaformikwizard.

npm install yeaformikwizard

WHY ?

This wizard was created because many other formik wizard where attempting to use the DOM objects of Formik, which on change brake and/or fill the terminal with errors (and my clients really don't like it)

Usage

To use this you need to:

• define the base CSS for the wizard,
• define the controls used for each form step__
• create a Step array, filled with the steps for your final form

CSS classes

Find in your css theme what classes you're setting for this props of the wizard

• displaySteps: boolean Should this wizard show an step list
• stepsUlClassName: name of the class for the steps iteration
• stepsLiClassName: name of the class for the steps iteration used for the individual step
• stepsLiSelectedClassName: name of the class for the steps iteration used for the current step
• stepsLiButtonClassName: name of the class for the button in the li
• stepsTitleClassName: name of the class for the title string of the UL
• stepsSubTitleClassName: name of the class for the subtitle (If pressent)
• buttonsContainerClassName: name of the class for the div containing the buttons
• cancelClassName: name of the class for the Cancel button if enabled
• backClassName: className for the GoBack button if more than one step
• nextClassName: className for the Next
• finishClassName: className for the Finish button

Controls

When you define the controls to use in the wizard, omit the Formik Tag, also, the wizard at this momment doesn't provide the controls access to the low level API to the controls. Here is an stupid example for this. Also, be sure to pass the loading prop to disable the controls when processing.

Also, you can pass aditional props to the form (more on this latter), reference them in the control props). This is usefull if your control want's to make an AJAX request to fetch data from a control.

import { Field } from 'formik'

const Step1 = ({loading, anotherProp} => (
	<div>
		<Field disabled={loading} placeholder={anotherProp} name={'name'} />
    </div>
)
const Step2 = ({loading} => (
	<div>
		<Field disabled={loading} name={'name2'} />
    </div>
)

Steps

The steps for the forms are defined in a JS Array, filled with the object definitions for the object. This objects have to follow this pattern:

const step = {
    title: "",
    subTitle: "",
    component: () => <div />,
    props: {},
    validation: () => null,
    initialValues: {}
}

This object represent:

• title: displayed in the form seps
• subTitle: displayed along the title if provided optional
• component: here we pass the function wich renders the form
• props: here is where we pass the properties for the component
• validationSchema: validation function, I strongly recommend to use yup
• initialValues: sets the form initial steps (all the fields name have to be here to prevent errors displayed into the console

Example for the controls avobe

import * as Yup from 'yup'

const formSteps = [{
    title: "UserName",
    subTitle: "uname",
    component: Step1,
    props: {}
    validationSchema: Yup.object().shape({
    	name: Yup.string().required("* Field Required").max(120, "* 120 Characters Max").min(5, "* 5 Characters Min")
    }) 
    initialValues: {name : ''}
},{
    title: "Second UserName",
    component: Step2,
    props: {}
    validationSchema: Yup.object().shape({
    	name2: Yup.string().required("* Field Required").max(120, "* 120 Characters Max").min(5, "* 5 Characters Min")
    }) 
    initialValues: {name2 : ''}
}]

Show the form in your JSX

When you have all the CSS, controls and the step array defined, print the form into your JSX.

Heres the full example

import { Field } from 'formik'
import YEAFormikWizard from 'yeaformikwizard'
import * as Yup from 'yup'

const Component = ({loading}) => {

	const Step1 = ({loading, anotherProp} => (
        <div>
            <Formik disabled={loading} placeholder={anotherProp} name={'name'} />
        </div>
    )
    const Step2 = ({loading} => (
        <div>
            <Formik disabled={loading} name={'name2'} />
        </div>
    )
    
    const formSteps = [{
        title: "UserName",
        subTitle: "uname",
        component: Step1,
        props: { anotherProp: 'User Name' }
        validationSchema: Yup.object().shape({
            name: Yup.string().required("* Field Required").max(120, "* 120 Characters Max").min(5, "* 5 Characters Min")
        }) 
        initialValues: {name : ''}
    },{
        title: "Second UserName",
        component: Step2,
        props: {}
        validationSchema: Yup.object().shape({
            name2: Yup.string().required("* Field Required").max(120, "* 120 Characters Max").min(5, "* 5 Characters Min")
        }) 
        initialValues: {name2 : ''}
    }]

	// Render our component
	return (
      <div>
          <YEAFormikWizard
              displaySteps = {true}
              stepsLiClassName = ''
              stepsLiSelectedClassName = ''
              stepsUlClassName = ''
              buttonsContainerClassName=''
              cancelClassName=''
              backClassName=''
              nextClassName=''
              finishClassName=''
              steps={formSteps}
              loading={loading}
              cbCancel= {() => { 
                  alert("cancel")
              }}
              cbFinish={(values) => {
                  console.log("values", values)
              }}
          />
      </div>
    )
}

export default Component