Skip to content

aliaksandr-master/react-fractal-field

Repository files navigation

npm npm Dependency Status devDependency Status peerDependency Status

react-fractal-field

$ npm install prop-types lodash react react-fractal-field --save

Usage

import { Field, FieldSet } from 'react-fractal-field';

const MyComponent = ({ onSubmit }) => (
  <FieldSet onSubmit={onSubmit} isolated>
    {({ triggerSubmit }) => (
      <div>
        <Field name="value">
          {({ control }) => (
            <div>
              <input {...control} type="text" />
            </div>
          )}
        </Field>
        <button onClick={triggerSubmit}>Submit</button>
      </div>
    )}
  </FieldSet>
)

API

common FieldSet/FieldList/Field props:

  • id: [ String, Number ] - ID used for remote controlling this field/form (null by default)
  • softTypes: [ Boolean ] - disable type checking. HIGHLY NOT RECOMMENDED!
  • isolated: [ Boolean ] - if true meta/value stopped from sharing between parent
  • name: [ String, Number ] - need for value binding
  • value: [String, Boolean, Number, Array, Object, Null]
  • initialValue: [String, Boolean, Number, Array, Object, Null] - values that will be provided for child fields (useful only for forms)
  • onChange: [ Function ] - handler that will be called on every field value changes
  • onValueChange: [ Function ] - handler that will be called on every field changes
  • validate: [ Function ] - validation function/array . if error it need to return the error-message string
  • onChangeValidity: [ Function ]
  • postponeInvalid: [ Boolean ]
  • form: [ Boolean ]
  • onSubmit: [ Function ] - handler that will be called on triggerSubmit only in valid form state
  • exceptionMessage: [ Any ] - error message in case validate/normalize/format throws the error
  • children: [ Function ] - obviously, content of field/form
  • autoClean: [ Boolean ]
  • debug: [ Boolean ]

Field props:

  • normalize: [ Function ] - filter value before call onChange/onSubmit/validate callback
  • format: [ Function ] - filter value before rendering (or set value to child field). from outer format to inner format

Common FieldSet/FieldList/Field children function params:

  • triggerChange: [ Function ] - call when you want to trigger change field by some case
  • triggerReset: [ Function ] - call when you want to trigger submit, obvious
  • value: [ Any ]
  • touched: [ Boolean ] - true when field or some child field was changed once
  • pristine: [ Boolean ] - true when field or some child field was not changed once
  • submitted: [ Boolean ] - when this form/field of parent was submitted once
  • valid: [ Boolean ] - true if children and this field has no errors
  • invalid: [ Boolean ] - true if children and this field/children has errors
  • hasException: [ Boolean ] - true if children and this field/children has exceptions
  • error: [ Any ] - first error are not false, that returned from validate function
  • invalidChildren: [ Array ] - ids of closest children with errors
  • active: [ Boolean ] - true if field/children is focusing right now
  • activated: [ Boolean ] - true if field/children was focused once
  • form: [ Object ] - Props of closest isolated form (or field itself)

Common FieldSet/FieldList/Field children function params when props.form is true:

  • triggerSubmit: [ Function ] - call when you want to trigger submit, obvious
  • submitSuccess: [ Boolean ] - state of submitting
  • submitFailed: [ Boolean ] - state of submitting
  • submitting: [ Boolean ] - state of submit processing. in pending (if onSubmit returns the Promise object)
  • submitted: [ Boolean ] - true if form was submitted once
  • submittedTimes: [ Number ] - count of triggerSubmit calling
  • submitErrors - Any - payload of submitting

Field children function params

  • control: { value, onChange, onBlur, onFocus } - shortcut for putting it into control component (only for components without children fractal-fields)

FieldList children function params:

  • removeItems: [ Function ]
  • appendItems: [ Function ]
  • prependItems: [ Function ]
  • items: [ Array ]

Remote api

  • triggerSubmit(id)
  • triggerChange(id)
  • onError(callback)

About

fractal form engine with own state management

Resources

License

Stars

Watchers

Forks

Packages

No packages published