1.1.16-4 • Published 5 years ago

@dock365/reform v1.1.16-4

Weekly downloads
13
License
MIT
Repository
github
Last release
5 years ago

React Form

npm Version

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

NameTypeRequiredDescription
onSubmit(e: event, values: { key: value })falseReturn complete values in the field on form submit
onBlur(e: event, values: { key: value })falseReturn complete values in the field on form field blur
onChange(e: event, values: { key: value })falseReturn complete values in the field on form field blur
validateOnValidateOnTypes or 0 - Submit, or 1 - FieldChange, or 2 - FieldBlur,
validationMessagesIValidationFailMessages or {[criterion: string]: message}falsecustom validation messages
showAsteriskOnRequiredbooleanfalseShow asterisk (*) on required field labels

Field Props

NameTypeRequiredDescription
namestringtrueA unique name to identify the field and value
labelstringfalseLabel to show on field
placeholderstringfalsePlaceholder value
defaultValueany based on field typefalseDefault value
render(props: IFieldRenderProps) => JSX.ElementfalseField element
onChange(value: any based on field) => void;falseOn field change action
onBlur(value: any based on field) => void;falseOn field blur action
validationRulesvalidationRulesfalsevalidation rules based on @dock365/validator
customPropsanyfalseCustom 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.

1.1.16-4

5 years ago

1.1.16-3

5 years ago

1.1.16-1

5 years ago

1.1.16-2

5 years ago

1.1.16-0

5 years ago

1.1.15

6 years ago

1.1.14

6 years ago

1.1.13

6 years ago

1.1.12

6 years ago

1.1.11

6 years ago

1.1.11-0

6 years ago

1.1.10

6 years ago

1.1.9

6 years ago

1.1.8

6 years ago

1.1.7

6 years ago

1.1.6

6 years ago

1.1.5

6 years ago

1.1.4

6 years ago

1.1.3

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.1.0-0

6 years ago

1.0.0

6 years ago

1.0.0-3

6 years ago

1.0.0-2

6 years ago

1.0.0-1

6 years ago

1.0.0-0

6 years ago

0.11.9

6 years ago

0.11.8

6 years ago

0.11.7

6 years ago

0.11.6

6 years ago

0.11.6-12

6 years ago

0.11.6-11

6 years ago

0.11.6-10

6 years ago

0.11.6-9

6 years ago

0.11.6-8

6 years ago

0.11.6-7

6 years ago

0.11.6-6

6 years ago

0.11.6-5

6 years ago

0.11.6-4

6 years ago

0.11.6-3

6 years ago

0.11.6-2

6 years ago

0.11.6-1

6 years ago

0.11.6-0

6 years ago

0.11.5

6 years ago

0.11.4

6 years ago

0.11.3

6 years ago

0.11.2

6 years ago

0.11.1

6 years ago

0.11.1-5

6 years ago

0.11.1-4

6 years ago

0.11.1-3

6 years ago

0.11.1-1

6 years ago

0.11.0-3

6 years ago

0.11.0-2

6 years ago

0.11.0-1

6 years ago

0.11.0-0

6 years ago

0.9.0-5

6 years ago

0.9.0-4

6 years ago

0.9.0-3

6 years ago

0.9.0-2

6 years ago

0.9.0-1

6 years ago

0.10.0-0

6 years ago

0.9.0-0

6 years ago

0.8.1

6 years ago

0.8.0

6 years ago

0.7.0

7 years ago

0.7.0-alpha.1

7 years ago

0.7.0-alpha

7 years ago

0.6.7

7 years ago

0.6.6

7 years ago

0.6.5

7 years ago

0.6.4

7 years ago

0.6.3

7 years ago

0.6.2

7 years ago

0.6.1

7 years ago

0.6.0

7 years ago

0.5.18

7 years ago

0.5.17

7 years ago

0.5.16

7 years ago

0.5.15

7 years ago

0.5.14

7 years ago

0.5.13

7 years ago

0.5.12

7 years ago

0.5.11

7 years ago

0.5.10

7 years ago

0.5.9

7 years ago

0.5.8

7 years ago

0.5.7

7 years ago

0.5.6

7 years ago

0.5.4

7 years ago

0.5.3

7 years ago

0.5.2

7 years ago

0.5.1

7 years ago

0.5.0

7 years ago

0.4.17

7 years ago

0.4.16

7 years ago

0.4.15

7 years ago

0.4.14

7 years ago

0.4.13

7 years ago

0.4.12

7 years ago

0.4.11

7 years ago

0.4.10

7 years ago

0.4.9

7 years ago

0.4.8

7 years ago

0.4.7

7 years ago

0.4.6

7 years ago

0.4.5

7 years ago