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)