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) | :heavy_check_mark: | | an array of fields to be generated in the form. | | title | string | :x: | | adds title to the form. | | paragraph | string | :x: | | adds paragraph to the form. | | validationSchema | yup validation schema | :x: | | validates your form with yup schema | | validate | func | :x: | | a function to validate your form signature: (values: object) => object | | onSubmit | func | string | :heavy_check_mark: | | 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 | :x: | post | HTTP request method to send the form data (only works if the onSubmit prop is a string) | | afterDefaultSubmit | func | :x: | | a function to execute after default submit (only executed if onSubmit prop is a string). signature: (res: AxiosResponse, actions: FormikHelpers) => void | | useCaptcha | boolean | :x: | 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 | :x: | { alignItems: "center", direction: "row", justify: "space-between",spacing: 1,} | MaterialUI Grid props to be applied to the fields div container | | submitProps | object | :x: | {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 | :heavy_check_mark: | | the type of the field needs to be "array" in this case | | fieldName | string | :heavy_check_mark: | | the name of the field note that it needs to be unique and cannot be "fieldName" (causes a bug) | | label | string | :heavy_check_mark: | | the label of the field. | | initialValue | array | :heavy_check_mark: | | the initialValue of the field. | | of | FieldType[](array) | :heavy_check_mark: | | the fields that will render on each row of the array note that nested arrays is not supported | | max | number | :x: | | if provided the array will have max length. | | startEmpty | boolean | :x: | false | if true the array will starts as an empty array. | | newItemText | string | :x: | | the text that will render on the add new item button.this will override the default text | | rowProps | object | :x: | | extra props to pass to the row (style, className, etc...) | | props | object | :x: | | extra props to pass to the component (style, className, etc...) | | grid | object | :x: | { xs:12 } | Grid Sizes object |

Autocomplete

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

Checkbox

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

Dates

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

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

Other

Create your own component.

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

Radio

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

Select

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

Switch

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

Textarea

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

TextField

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

License

MIT