React Redux form field connectors.

Usage no npm install needed!

<script type="module">
  import reduxFieldConnect from '';


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.



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.


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