EZ-FormikUI

Easy form generator using Formik, MaterialUI, Google Recaptcha and Axios.

An easy way to generate forms using json like objects.

Links

• Installation
• Usage
• Examples
• Config
  • Captcha Key
  • Text
  • Config Setup
• Props
• Fields Props
  • Array
  • Autocomplete
  • Checkbox
  • Dates
  • Other
  • Radio
  • Select
  • Switch
  • Textarea
  • TextField

Installation

npm:

npm install ez-formikui

yarn:

yarn add ez-formikui

Usage

import EZFormikUI from "ez-formikui";

const Example = () => {
  return (
    <EZFormikUI
      fields={
        {
          fieldName: "email",
          label: "Email Address",
          type: "text",
          options: "email",
          props: { disabled: true },
          initialValue: ""
        },
        {
          fieldName: "password",
          label: "Password",
          type: "text",
          options: "password",
          initialValue: ""
        }
      }
      title="EZ-FormikUI"
      paragraph="Easy form generator"
      onSubmit={values => alert(JSON.stringify(values, undefined, 4))}
      validate={values => {
        const errors = {};

        if (values.custom > 2) {
          errors.custom = "No more then 2!";
        }

        return errors;
      }}
    />
  );
};

Examples

JS Example
TS Example

Config

General config that the form uses.

const config = {
  captchaKey: "",
  text: {
    checkCaptcha: "Check the box!",
    submit: "Submit",
    selectEmpty: "None",
    addNewItem: (name: string) => `Add new ${name}`,
  },
};

export default config;

captchaKey

If you want to use captcha in your forms register to get captcha key and set up you're key

text

Default text that the form will use. here you can change it.

Config Setup

To change the config import the setCaptchaKey, changeText from the package.

Example:

import React from "react";
import { setCaptchaKey, changeText } from "ez-formikui";

const captchaKey = "<You're captcha key>";
const textObj = {
    checkCaptcha: "Check the box!",
    submit: "Submit",
    selectEmpty: "Clear Selection",
    addNewItem: (name: string) => `Add new ${name} to the array.`,
};

setCaptchaKey(captchaKey);
changeText(textObj);

export default function App() {
  return (
    ...
  );
};

Props

Name	Type	Required	Default	Description
fields	FieldType[](array)	✔️		an array of fields to be generated in the form.
title	string	❌		adds title to the form.
paragraph	string	❌		adds paragraph to the form.
validationSchema	yup validation schema	❌		validates your form with yup schema
validate	func	❌		a function to validate your form signature: (values: object) => object
onSubmit	func | string	✔️		a function / url to submit your form if string is provided the values will be submitted to the given url (default request method is post, can be changed with submitMethod prop). if function is provided then the function will be called upon submit (the function will be wrapped automatically in try catch block to handle errors) signature: (values: object, actions: FormikHelpers) => void
submitMethod	get | delete | put | patch | post	❌	post	HTTP request method to send the form data (only works if the onSubmit prop is a string)
afterDefaultSubmit	func	❌		a function to execute after default submit (only executed if onSubmit prop is a string). signature: (res: AxiosResponse, actions: FormikHelpers) => void
useCaptcha	boolean	❌	false	if set to true the form will use google recpatcha v2 (note that to use this feature you will need to set up captcha key)
gridProps	object	❌	{ alignItems: "center", direction: "row", justify: "space-between", spacing: 1, }	MaterialUI Grid props to be applied to the fields div container
submitProps	object	❌	{ grid:{xs:12} }	props to apply on the submit button

Fields

The fields of the form. Checkout the examples.

Array

Prop Name	Type	Required	Default	Description
type	string	✔️		the type of the field needs to be "array" in this case
fieldName	string	✔️		the name of the field note that it needs to be unique and cannot be "fieldName" (causes a bug)
label	string	✔️		the label of the field.
initialValue	array	✔️		the initialValue of the field.
of	FieldType[](array)	✔️		the fields that will render on each row of the array note that nested arrays is not supported
max	number	❌		if provided the array will have max length.
startEmpty	boolean	❌	false	if true the array will starts as an empty array.
newItemText	string	❌		the text that will render on the add new item button. this will override the default text
rowProps	object	❌		extra props to pass to the row (style, className, etc...)
props	object	❌		extra props to pass to the component (style, className, etc...)
grid	object	❌	{ xs:12 }	Grid Sizes object

Autocomplete

Prop Name	Type	Required	Default	Description
type	string	✔️		the type of the field needs to be "autocomplete" in this case
fieldName	string	✔️		the name of the field note that it needs to be unique and cannot be "fieldName" (causes a bug)
label	string	✔️		the label of the field.
options	array	✔️		the options of the component needs to be array of { value: any; label: string }
initialValue	any	✔️		the initialValue of the field.
props	object	❌		extra props to pass to the component (style, className, etc...)
grid	object	❌	{ xs:12 }	Grid Sizes object

Checkbox

Prop Name	Type	Required	Default	Description
type	string	✔️		the type of the field needs to be "checkbox" in this case
fieldName	string	✔️		the name of the field note that it needs to be unique and cannot be "fieldName" (causes a bug)
label	string	✔️		the label of the field.
options	array	✔️		the options of the component needs to be array of { value: any; label: string }
initialValue	string[]	✔️		the initialValue of the field.
props	object	❌		extra props to pass to the component (style, className, etc...)
grid	object	❌	{ xs:12 }	Grid Sizes object

Dates

Date pickers (date, time or date and time).

Prop Name	Type	Required	Default	Description
type	string	✔️		the type of the field needs to be on of "date" | "time" | "datetime" in this case
fieldName	string	✔️		the name of the field note that it needs to be unique and cannot be "fieldName" (causes a bug)
label	string	✔️		the label of the field.
initialValue	MomentInput	❌	Date.now()	the initialValue of the field.
props	object	❌		extra props to pass to the component (style, className, etc...)
grid	object	❌	{ xs:12 }	Grid Sizes object

Other

Create your own component.

Prop Name	Type	Required	Default	Description
type	string	✔️		the type of the field needs to be "other" in this case
fieldName	string	✔️		the name of the field note that it needs to be unique and cannot be "fieldName" (causes a bug)
label	string	✔️		the label of the field.
component	Component	✔️		an React component that will receive those props
initialValue	any	✔️		the initialValue of the field.
props	object	❌		extra props to pass to the component (style, className, etc...)
grid	object	❌	{ xs:12 }	Grid Sizes object

Radio

Prop Name	Type	Required	Default	Description
type	string	✔️		the type of the field needs to be "radio" in this case
fieldName	string	✔️		the name of the field note that it needs to be unique and cannot be "fieldName" (causes a bug)
label	string	✔️		the label of the field.
options	array	✔️		the options of the component needs to be array of { value: any; label: string }
initialValue	string	✔️		the initialValue of the field.
props	object	❌		extra props to pass to the component (style, className, etc...)
grid	object	❌	{ xs:12 }	Grid Sizes object

Select

Prop Name	Type	Required	Default	Description
type	string	✔️		the type of the field needs to be "select" in this case
fieldName	string	✔️		the name of the field note that it needs to be unique and cannot be "fieldName" (causes a bug)
label	string	✔️		the label of the field.
options	array	✔️		the options of the component needs to be array of { value: any; label: string }
initialValue	any	✔️		the initialValue of the field.
isMulti	boolean	❌	false	if set to true the multiple options could be selected. in this case the initialValue suppose to be array
props	object	❌		extra props to pass to the component (style, className, etc...)
grid	object	❌	{ xs:12 }	Grid Sizes object

Switch

Prop Name	Type	Required	Default	Description
type	string	✔️		the type of the field needs to be "switch" in this case
fieldName	string	✔️		the name of the field note that it needs to be unique and cannot be "fieldName" (causes a bug)
label	string	✔️		the label of the field.
initialValue	boolean	✔️		the initialValue of the field.
props	object	❌		extra props to pass to the component (style, className, etc...)
grid	object	❌	{ xs:12 }	Grid Sizes object

Textarea

Prop Name	Type	Required	Default	Description
type	string	✔️		the type of the field needs to be "textarea" in this case
fieldName	string	✔️		the name of the field note that it needs to be unique and cannot be "fieldName" (causes a bug)
label	string	✔️		the label of the field.
rows	number	✔️		the number of initial rows the textarea will have.
rowsMax	number	❌	999	the number of max rows.
initialValue	string	✔️		the initialValue of the field.
props	object	❌		extra props to pass to the component (style, className, etc...)
grid	object	❌	{ xs:12 }	Grid Sizes object

TextField

Prop Name	Type	Required	Default	Description
type	string	✔️		the type of the field needs to be "text" in this case
fieldName	string	✔️		the name of the field note that it needs to be unique and cannot be "fieldName" (causes a bug)
label	string	✔️		the label of the field.
options	`"email"	"password"	"number"	"tel"
initialValue	string	number	Date	✔️
props	object	❌		extra props to pass to the component (style, className, etc...)
grid	object	❌	{ xs:12 }	Grid Sizes object

License

MIT