Package Exports

react-formik-yup

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-formik-yup) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-material-formik-wizard

Form Wizard using Material-ui, and Formik

Mobile & Desktop Sample Image

Install

npm install --save react-material-formik-wizard

Usage

FormItem

Input component wrapper.

import {FormItem} from 'react-material-formik-wizard'

...
<FormItem
  type="text"
  name="title"
  label="Title"
  placeholder="Title"
  onChange={handleChange}
  onBlur={handleBlur}
  value={values.title}
  error={errors.title}
  touched={touched.title}
/>
...

Choose from the following options for the type property:

"checkbox", "select", "dynamictext", "textarea", "text" default is text

Props

type: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
error: PropTypes.object.isRequired,
touched: PropTypes.object.isRequired,
variant: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
onBlur: PropTypes.func.isRequired,
placeHolder: PropTypes.string,
options: PropTypes.array // for select and checkbox only
value: // PropType is string or array of objects

material-ui variant is optional, default is set to "outlined"

Select Options properties example:

<FormItem
  id="sauce_type"
  name="sauce_type"
  type="select"
  label="Sauce Type"
  options={[
    { label: "Condiment", value: "Condiment" },
    { label: "Dip", value: "Dip" },
    { label: "Sauce", value: "Sauce" },
    { label: "Marinade", value: "Marinade" },
    { label: "Other", value: "Other" }
  ]}
  onBlur={handleBlur}
  onChange={handleChange}
  value={values.sauce_type}
  error={errors.sauce_type}
  touched={touched.sauce_type}
/>

CheckBox Options properties example:

<FormItem
  id="taste_profile"
  name="taste_profile"
  type="checkbox"
  label="Taste Profile"
  options={[
    { id: "bitter", label: "Bitter" },
    { id: "numbing", label: "Numbing" },
    { id: "salty", label: "Salty" },
    { id: "sour", label: "Sour" },
    { id: "spicy", label: "Spicy" },
    { id: "sweet", label: "Sweet" },
    { id: "umami", label: "Umami" }
  ]}
  onBlur={handleBlur}
  validateField={validateField}
  setFieldValue={setFieldValue}
  setFieldTouched={setFieldTouched}
  value={values.taste_profile}
  error={errors.taste_profile}
  touched={touched.taste_profile}
/>

FormWizard

Properties:

formComponents: PropTypes.array.isRequired,
doSubmit: PropTypes.func.isRequired,
displayProgress: PropTypes.bool.isRequired,
successTitle: PropTypes.string.isRequired,
successTitleComponent: PropTypes.string.isRequired,
successMessage: PropTypes.string.isRequired,
successMessageComponent: PropTypes.string.isRequired

Create individual forms using formik, import each form into desired page, then set up an array of form objects shown below. Usage example:

import React from "react";
import { FormWizard } from "react-material-formik-wizard";

import RecipeStep from "./steps/RecipeStep";
import AboutStep from "./steps/AboutStep";
import DetailStep from "./steps/DetailStep";
import DisplayStep from "./steps/DisplayStep";
import Review from "./steps/Review";

function App() {
  const steps = [
    {
      component: RecipeStep,
      title: "Recipe"
    },
    {
      component: AboutStep,
      title: "About"
    },
    {
      component: DetailStep,
      title: "Details"
    },
    {
      component: DisplayStep,
      title: "Display"
    },
    {
      component: Review,
      title: "Review"
    }
  ];

  const doSubmit = values => {
    alert("submitting: " + JSON.stringify(values));
    console.log("submitting valuess", values);
  };

  return (
    <React.Fragment>
      <FormWizard
        displayProgress={true}
        formComponents={steps}
        doSubmit={doSubmit}
        successTitle={"Success"}
        successTitleComponent={"h1"}
        successMessage={"Your recipe has been submitted"}
        successMessageComponent={"h5"}
      />
    </React.Fragment>
  );
}

export default App;

Example Project

To run the example project to see how it is used.

git clone https://github.com/GlennChon/react-material-formik-wizard.git

Move into the cloned directory's example folder and install the dependencies and run to package

cd react-material-formik-wizard
npm install
npm start

In a new terminal, install example dependencies and start the project.

cd ./example
npm install
npm start

react-formik-yup