Using MegaFlow is too easy. You just have to import it and pass the schema to it:

import React from "react";
import MegaFlow from "@licenserocks/mega-flow";

import schema from "./schema.json";

export default function App() {
  return (
    <MegaFlow schema={schema} />
  );
}

Here's the complete list of MegaFlow acceptable props:

schema <JSON> - required

The JSON schema for creating the workflow.

steps/step:

The main property of this JSON object is steps, which is an array of workflow steps. It contains the step title and input rows.

rows/row:

Responsible for each form row label and related fields.

fields:

An array of the inputs that are going to be in the same row (line) together. Required properties of each field are name and type.

type:

Type of the field (input) that can be one of these:

• select
• borderedRadio
• checkbox
• radio
• toggleSwitch
• fileUpload
• filePond
• price
• reactSelect
• stepper
• text
• textArea

Any type other than this list, will render text input.

Each field can have defaultValue, required (for validation), and any other normal props that a normal HTML input can have.

Example:

{
  "steps": [
    {
      "title": "Basic info",
      "rows": [
        {
          "label": "Title (English)",
          "fields": [
            {
              "name": "title",
              "placeholder": "The English title of the movie",
              "required": "Title is required"
            }
          ]
        },
        {
          "label": "Amount",
          "fields": [
            {
              "name": "amount",
              "placeholder": "Amount",
              "required": "Amount is required",
              "type": "number"
            }
          ]
        },
        {
          "label": "Price",
          "fields": [
            {
              "name": "price",
              "placeholder": "Price",
              "required": "Price is required",
              "type": "price"
            }
          ]
        }
      ]
    },
    {
      "title": "Cover",
      "rows": [
        {
          "fields": [
            {
              "multi": false,
              "name": "cover",
              "required": "Cover is required",
              "type": "fileUpload"
            }
          ]
        }
      ]
    }
  ]
}

icons <[Fontawesome Icon Object]>

The list of icons that are used in schema file for inputs. It can be imported from all Fontawesome svg libraries.

Example:

import React from "react";
import MegaFlow from "@licenserocks/mega-flow";
import {
  faDownload,
  faHashtag,
  faTrash,
} from "@fortawesome/free-solid-svg-icons";

import schema from "./schema.json";

const icons = {
  faDownload,
  faHashtag,
  faTrash,
};

export default function App() {
  return (
      <MegaFlow icons={icons} schema={schema} />
  );
}

onFinish <workflowData: function>

Triggers when user filled in all fields of all steps successfully. It provides the data of all the fields in workflow.

Example:

import React from "react";
import MegaFlow from "@licenserocks/mega-flow";

import schema from "./schema.json";

export default function App() {
  return (
    <MegaFlow 
      onFinish={workflowData => console.log(workflowData)} 
      schema={schema} 
    />
  );
}

onStepSubmit <stepData: function>

Triggers when user completes a step of workflow. It provides the data of related step.

theme <object>

The object to change workflow theme. It's based on Material-UI theme object.

All other props will be passed to Wizard component used in MegaFlow implementation.