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)