redux-field-connect 1.0.2

These are some react-redux wrappers/containers for the redux-field module. Because redux-field is not always used with React these are split into a dedicated module.

Wrappers

connectInput(Component)

Use this when you want to attach action handlers (onBlur, onChange, onFocus, onInput, onSubmit) and result value to an input field. @see connectInput getFormEvents

Over Simplified Example:

Make sure you send the wrapped input a prefix property.

import { connectInput } from 'redux-field-connect'

function InputEl(props) {
  return <input {...props} />
}
const Input = connectInput(InputEl)

function CoordsInput() {
  return <Input id="coords" prefix="coords" type="text" size="50" />
}

Working Example: code - website.

connectField({})(Component)

When your needs are more complicated and you want a component injected with all the action handlers and all of the field state. Actions are grouped into fieldEvent, formEvent, formHandler. The state in added as the form property.

Added props:

• fieldEvent: clear, clearError, close, error, invalid, meta, open, save, saved, savedProgress, valid
• formEvent: onBlur, onChange, onFocus, onInput, onSubmit
• formHandler: handleBlur, handleChange, handleFocus, handleInput, handleSubmit
• form: blur, dragCount, error, errorMessage, focus, hasError, id, initialValue, invalid, invalidValue, isClosed, isDirty, isEditing, isOpen, isPristine, isSaved, isSaving, isTouched, isValid, meta, savedProgress, savedValue, status, suggestion, valid, validValue, value

@see connectField