Reusable React/Redux-Form Layout using HOC

BasicField.js

/**
 * Basic input field wrapped with FormField HOC
 */

import React from 'react'
import PropTypes from 'prop-types'
import FormFieldWrapper from './FormFieldWrapper'

import './BasicField.css'

const BasicField = ({
  id,
  input,
  type,
  limit,
  placeholder,
  autocomplete,
}) => (
  <div className="basic-field">
    <input
      className="basic-field-input"
      id={id}
      {...input}
      placeholder={placeholder}
      type={type}
      maxLength={limit}
      autoComplete={autocomplete}
    />
    {limit > 0 && (
      <div className="basic-field-input-counter">
        {limit - input.value.length}
      </div>
    )}
  </div>
)

BasicField.propTypes = {
  id: PropTypes.string.isRequired,
  input: PropTypes.shape({
    name: PropTypes.string,
    onBlur: PropTypes.func,
    onChange: PropTypes.func,
    onDragStart: PropTypes.func,
    onDrop: PropTypes.func,
    onFocus: PropTypes.func,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
  }).isRequired,
  type: PropTypes.string,
  placeholder: PropTypes.string,
  limit: PropTypes.number,
  autocomplete: PropTypes.string,
}

BasicField.defaultProps = {
  type: 'text',
  placeholder: '',
  limit: -1,
  autocomplete: 'nope',
}

export default FormFieldWrapper(BasicField)

Form.js

/**
 * Redux-Form Field component showing BasicField passed in
 */

<Field
  id="brief-name"
  name="guidelinesBrief"
  type="text"
  component={BasicField}
  label="Brief Name"
  limit={30}
  required
/>

FormFieldWrapper.js

/**
 * HOC to wrap form fields with a reusable grid layout + form label
 */

import React from 'react'
import PropTypes from 'prop-types'
import { Row, Col } from 'react-flexbox-grid'

import './FormFieldWrapper.css'

const FormFieldWrapper = FormField => {
  const wrappedField = ({
    id,
    label,
    required,
    meta: { touched, error },
    ...props
  }) => (
    <Row className={`form-field ${touched && error && 'hasError'}`}>
      <Col xs={12} md={3}>
        <label
          className={`form-field-label ${required &&
            'isRequired'}`}
          htmlFor={id}
        >
          {label}
          {required && <span className="form-field-required">Required</span>}
        </label>
      </Col>
      <Col xs={12} md={9}>
        <div>
          <FormField id={id} {...props} />
        </div>
        {touched &&
          error && <div className="form-field-validation">{error}</div>}
      </Col>
    </Row>
  )

  wrappedField.propTypes = {
    id: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    required: PropTypes.bool,
    meta: PropTypes.shape({
      touched: PropTypes.bool,
      error: PropTypes.string,
    }).isRequired,
  }

  wrappedField.defaultProps = {
    required: false,
  }

  return wrappedField
}

export default FormFieldWrapper