@dock365/reform

React Form

Install

1 Install react form as dependency

# Using yarn package manager
$ yarn add @dock365/reform

# Using npm package manager
$ npm install --save @dock365/reform

2 Import React form module

// ES6
import { Form } from "@dock365/reform"

// ES5
var Form = require("@dock365/reform").Form;

Example

  import React from "react";
  import { Form, Field } from "@dock365/reform";

  export default (props) => {
    return (
      <Form onSubmit={(e, values) => console.log(values)} validateOn={1}>
        <Field name="test1" render={(props) => (
          <div>
            <input {...props.input} />
            <ul>
              {props.errors.map((error, i) => <li key={i}>{error}</li>)}
            </ul>
          </div>
        )}
          validationRules={{
            required: true,
            maxLength: 10,
          }} />
        <Field name="test2" render={(props) => <input {...props.input} />} />
        <Field name="test3" render={(props) => <input {...props.input} />} />
        <button>Submit</button>
      </Form>
    );
  };

Properties

Form Props

Name	Type	Required	Description
onSubmit	(e: event, values: { key: value })	false	Return complete values in the field on form submit
onBlur	(e: event, values: { key: value })	false	Return complete values in the field on form field blur
onChange	(e: event, values: { key: value })	false	Return complete values in the field on form field blur
validateOn	ValidateOnTypes or 0 - Submit, or 1 - FieldChange, or 2 - FieldBlur,
validationMessages	IValidationFailMessages or {[criterion: string]: message}	false	custom validation messages
showAsteriskOnRequired	boolean	false	Show asterisk (*) on required field labels

Field Props

Name	Type	Required	Description
name	string	true	A unique name to identify the field and value
label	string	false	Label to show on field
placeholder	string	false	Placeholder value
defaultValue	any based on field type	false	Default value
render	(props: IFieldRenderProps) => JSX.Element	false	Field element
onChange	(value: any based on field) => void;	false	On field change action
onBlur	(value: any based on field) => void;	false	On field blur action
validationRules	validationRules	false	validation rules based on @dock365/validator
customProps	any	false	Custom Props that can be accessed from render props

Field Render Props

All props from Field Props excluding render and including

Name	Type	Description
errors	string[]	Validation massages if any validation rule fails

Contributing!

All contributions are super welcome!

License

React Form is MIT licensed.