ez-formikui v0.1.67

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

Fields

The fields of the form. Checkout the examples.

Array

Autocomplete

Checkbox

Dates

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

Other

Create your own component.

Radio

Select

Switch

Textarea

TextField

License

MIT