@dock365/reform NPM

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