Dynamic-form-blundert NPM

About The Project

This project implements a form generator with React. Using mainly React Hooks.

Built With

Getting Started

To start to use the library, follow these semple steps.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

npm i react react-dom react-jss

Installation

npm i dynamic-form-blundert

Usage

Create a configuration file:

// config.js
export default     
{
  name: "email",
  label: "Email",
  helperText: "Write your email",
  tag: "input",
  type: "email",
  validations: [
    {
      kind: "required",
      message: "Email is required"
    },
    {
      kind: "pattern",
      reg: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/,
      considerRegAs: "positive",
      message: "You must type an email i.e. test@test.com"
    }
  ]
};

import React, { useRef } from "react";
import PropTypes from "prop-types";

import {
  DynamicForm,
  applyCrypt2State,
  useDynamicForm,
  DynamicFormProvider
} from "dynamic-form";

import { form as formConfig } from "./config.js";

function Example(props) {

  const stateFromService = useDynamicForm("state", "model");
  const errorFromService = useDynamicForm("state", "error");
  const { _globalErrors } = errorFromService;

  const onSubmit = event => {

    if (_globalErrors === 0) {
      console.log(stateFromService);
    }

    event.preventDefault();
  };

  // Render
  return (
    <DynamicFormProvider>

      <section>

        {_globalErrors === 0 ? <p>Form contains error.</p>}

        <form onSubmit={onSubmit}>
          <DynamicForm
            config={formConfig}
            ref={childRef}
            updateModelAtBlur={true}
            debug={true}
          />

          <button
            type="submit"
            onClick={onSubmit}
          >
            Confirm
          </button>
        </form>

      </section>

    </DynamicFormProvider>
  );
}

Example.propTypes = {
  classes: PropTypes.object.isRequired
};

export default Example;

For more examples, please refer to the Documentation

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.