reform-sze v0.0.2

reform-sze

a simple form builder for reactjs

Install

npm install --save reform-sze

Usage

import React, { Component } from "react";

import Form from "reform-sze";

class Example extends Component {
  constructor(props) {
    super(props);
    this.exampleForm = {
      name: {
        type: "textarea",
        divClassName: "divclass",
        wrapper: {
          type: "div",
          props: {
            className: "wrapper-element",
            style: { background: "black" }
          }
        },
        validation: {
          required: true
        },
        attributes: {
          value: "",
          placeholder: "Your name..."
        }
      },
      email: {
        type: "input",
        validation: {
          required: true
        },
        attributes: {
          value: "",
          name: "user_email",
          type: "email",
          placeholder: "Your email..."
        }
      },
      address: {
        street: {
          type: "input",
          validation: {
            required: true
          },
          attributes: {
            value: "",
            type: "text",
            placeholder: "Your street and house number..."
          }
        },
        zipCode: {
          type: "input",
          validation: {
            required: true,
            minLength: 5,
            maxLength: 5
          },
          attributes: {
            value: "",
            type: "text",
            placeholder: "Your zip code..."
          }
        }
      },
      submit: {
        label: "Submit",
        showLabel: false,
        type: "button",
        attributes: {
          className: "btn btn-success"
        }
      }
    };

    this.exampleForm.name.attributes.onKeyPress = this.userInputKeyPress;
    this.formRef = React.createRef();
  }

  userInputKeyPress = e => {
    console.log("key press", e.key);
  };

  submitFormHandler = event => {
    event.preventDefault();
    const validation = this.formRef.current.validate();

    if (validation.allValid === false) {
      console.log(validation.invalid);
      return;
    } else alert("all validated");
  };

  render() {
    return (
      <Form
        ref={this.formRef}
        elements={this.exampleForm}
        actions={{
          onSubmit: e => this.submitFormHandler(e)
        }}
      />
    );
  }
}

License

MIT ©