metaform-core

A framework for building react form libraries. Create your react form components and use this framework for adding form behavior using JSON-based schema.

Change logs

• fix #88: fix validation errors with autofill

Introduction

This library reads the JSON-based schema and lays out beautiful forms. It acts as a base for creating a dynamic form library.

Main features

• Layouting configuration
• Support for multiple-page forms
• Support for field dependencies
• Support custom components

Core components/concepts

• Form control (BaseFormControl)
• Form group (BaseFormGroup)
• Form stepper (BaseFormStepper)

Form control (BaseFormControl)

This is a class containing declarations of basic form controls as well as some other advanced form controls.

Form group (BaseFormGroup)

Contains declarations of basic form grouping controls.

Form stepper (BasicFormStepper)

This is another type of form grouping that contains declarations to implement stepper functionalities for your form.

How to use

This library contains abstract declarations and requires the user to implement his own core components.

• BasicFormControl - for basic components
• BasicFormGroup - for basic form grouping
• BasicFormStepper = for stepper functionalities
• Write your classes (typescript) and extend the above controls.
• To know details, check the documentation.

Implement an email control

class MyFormControl extends CoreFormControl {
  /**
   * Implement email
   */
  email() {
    return (
      <div className="form-group">
        <label forName="exampleInputEmail1">Email address</label>
        <input
          type="email"
          className="form-control"
          id="exampleInputEmail1"
          aria-describedby="emailHelp"
          placeholder="Enter email"
          onChange={this.handleChange}
        >
      </div>
    )
  }
}

Implement a phone control

class MyFormControl extends CoreFormControl {
  /**
   * Implement phone
   */
  phone() {
    return (
      <div className="form-group">
        <label forName="phone">Your Phone</label>
        <input
          type="tel"
          className="form-control"
          id="phone" aria-describedby="phoneHelp"
          placeholder="Enter your phone"
          onChange={this.handleChange}
        >
      </div>
    )
  }
}

Install

npm install --save @manojadams/metaform-core

Basic usage of the library

import MetaformRenderer from "@manojadams/metaforms-core";
import React from "react";
import FormControl from "./forms/FormControl";      // your form control implementation
import FormGroup from "./forms/FormGroup";          // your form group implementation
import { FormStepper } from "./forms/FormStepper";  // your form stepper implementation

class FormRenderer extends React.Component {

  constructor(props: IFormRenderer) {
    super(props);
  }

  render() {
    return (
      <MetaformRenderer 
        {...this.props} 
        baseFormControl={FormControl}
        baseFormGroup={FormGroup}
        baseFormStepper={FormStepper}
      />
    )
  }
}

export default FormRenderer;

License

MIT © manojadams