antd-form-generator

This is a simple library built on top of ant-design and react-hook-form That will generate an ant design form when given a valid schema.

Installation

npm install antd-form-generator

yarn add antd-form-generator

Usage

import FormGenerator from "antd-form-generator";

ReactDOM.render(
  <FormGenerator
    innerClassName={"fields-container"}
    outerClassName={"form-container"}
    formSchema={[
      {
        type: "text",
        name: "firstName",
        defaultValue: "Simon",
        required: true,
        placeholder: "First name",
        label: "First name",
        fieldProps: { disabled: false },
        validation: {
          required: true,
          errorMessage: "Please make sure your input is correct",
          validate: value => value.toString().startsWith("A")
        }
      },
      {
        type: "number",
        name: "age",
        required: true,
        defaultValue: 21,
        placeholder: "Age",
        label: "Age",
        fieldProps: { disabled: false, style: { width: 300 } },
        validation: {
          required: true,
          errorMessage: "Please make sure your input is correct"
        }
      }
    ]}
    onSubmit={data => {
      // api call done here
      console.log(data);
    }}
    renderFooter={handleSubmit => (
      <button className="button" onClick={() => handleSubmit()}>
        Submit
      </button>
    )}
  />,
  document.getElementById("root")
);

**The Schema**

The form schema should be structured like this

The following are all the available types of form-fields. ...*

• text
• number
• email
• money
• percent
• select
• textarea
• custom
• datepicker
• radio **

You can pass

[
 {
  type: "text",  // type of field
   name: "firstName", // name
   defaultValue: "Simon", // default value for the input.
   required: true,
   placeholder: "First name",
   label: "First name",
   fieldProps: { disabled: false },  // ant design props.
   validation: {  // validation object needs to be passed like this.
     required: true,
     errorMessage: "Please make sure your input is correct",
     validate: value => value.toString().startsWith("A")  // You can also pass a custom validation function.
   }
 },
 {
   type: "radio",
   name: "gender",
   options: ["Male", "Female"],  // this is an array of options for the radio.
   defaultValue: "Female",
   placeholder: "Gender",
   required: true,
   label: "Gender",
   validation: {
     required: true,
     errorMessage: "Please make sure your input is correct"
   },
   groupProps: { buttonStyle: "outline", size: "large" },
   // prop for the options container like
     <Radio.Group {...field.groupProps}><Radio /></Radio.Group>
    or
     <Select {...field.groupProps}><Option /></Select>

   fieldProps: {  // This one is for the individual options.
     disabled: false,
     style: { width: 150, textAlign: "center" }
   }
 }
]

*Styling

There are two props that we can pass to the component for styling

<FormGenerator
  // the following props are best suited to do the form layout.
  innerClassName={"fields-container"} // wraps all inputs
  outerClassName={"form-container"} // wraps the whole form including the submit button passed as a render prop
/>

Other than that, we can pass a style object to each field inside the fieldProps object like

    {
      type: "number",
      name: "age",
      fieldProps: {style: { width: 300, backgroundColor:"lightgrey", height:50, border:"none" } }
    }

Submitting form

The submitFormAsync prop takes a function that gets the user's inputs as an argument.

<FormGenerator
  onSubmit={data => {
    // user's valid inputs. this function won't get fired unless all validations have passed.
    console.log(data);
  }}
/>

*Submit Button

Submit Button is passed as a renderProp through a prop named: renderFooter This will allow you to have a button of any type, with your own customized styling and layout. Only exposing the click handler function for you.

<FormGenerator
  renderFooter={handleSubmit => (
    <MyButton onClick={() => handleSubmit()}>Submit Form</MyButton>
  )}
/>

Advanced Usage

Conditional Fields.

Whenever you have a form field that you want to render conditionally based on another input's value, you can add a property isConditional:true on the schema of that field. After that, add a conditons property that expects an array of "condition objects". A Condition Object has two properties. "when" and "is". if we had this condition object{when:"firstName", is:"Simon"} then, that field would only render if the field "firstName" has a value of "Simon".

  {
    type: "textarea",
    name: "licenseName",
    isConditional: true,
    conditions: [{ when: "age", is: 18 }],
    fieldProps: {
      placeholder: "Name/Address/Company on License",
      style: { ...inputStyle, height: 120 }
    },
    validation: {
      required: true,
      errorMessage: "Please make sure you added a valid license name"
    }
  }
  

This above field will render only when age is 18. You can add a number of conditoins to the array and the field would only render if all conditions pass.

| Props | description | | -------------- | -------------------------------------------------------------------------------- | | formSchema | The json or array of objects of form structure | | outerClassName | a className for the the element that wraps the form fields and the submit button | | innerClassName | a className for the fields container. Usually used to layout the form fields | | onSubmit | submitHandler for the form. Gets the user's valid inputs as an argument | | renderFooter | takes the submit button component as a renderProp. Example is shown above. |