react-material-formik-wizard
v1.0.16
Published
Form wizard using Material-ui, and Formik
Downloads
29
Maintainers
Readme
react-material-formik-wizard
Form Wizard using Material-ui, and Formik
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
License
MIT © GlennChon