MyCoolForm.jsx

import React form 'react'
import { compose, withHandlers } from 'recompose'
import { formHandler } from './utils'

// usage example
export const MyCoolForm = ({form, setForm, onSubmit}) => (
  <form onSubmit={onSubmit}>
    <input type="name" value={form.name} onChange={setForm('name')} />
    <input type="email" value={form.email} onChange={setForm('email')} />
    <input type="password" value={form.password} onChange={setForm('password')} />
    <button>save</button>
  </form>
)
                                                           
// you can put any other composed bits in here, but for now, I'll just make it a form
export default compose(
  formHandler({ name: '', email: '', password: '' }),
  withHandlers({
    onSubmit: ({ form }) => e => {
      e.preventDefault()
      // do submit here:
      console.log(form)
    }
  })
)(MyCoolForm)

MyCoolWizard.jsx

import React from 'react'
import { compose, withState, withHandlers } from 'recompose'
import { formHandler } from './utils'

// usage example
export const MyCoolWizard = ({
  form,
  setForm,
  onSubmit,
  onPrevious,
  onNext,
  step
}) => (
  <form onSubmit={onSubmit}>
    <h2>Step {step + 1}</h2>
    {step === 0 && (
      <div>
        <div>
          <label>name:</label>
          <input type="name" value={form.name} onChange={setForm('name')} />
        </div>
        <div>
          <label>email:</label>
          <input type="email" value={form.email} onChange={setForm('email')} />
        </div>
        <label>password:</label>
        <input
          type="password"
          value={form.password}
          onChange={setForm('password')}
        />
      </div>
    )}
    {step === 1 && (
      <div>
        <label>favorite color:</label>
        <input type="text" value={form.color} onChange={setForm('color')} />
      </div>
    )}
    {step === 2 && (
      <div>
        <label>favorite book:</label>
        <input type="text" value={form.book} onChange={setForm('book')} />
      </div>
    )}
    <hr />
    <div>
      <div style={{ float: 'left' }}>
        {step !== 0 && (
          <button type="button" onClick={onPrevious}>
            previous
          </button>
        )}
      </div>
      <div style={{ float: 'right' }}>
        {step !== 2 && (
          <button type="button" onClick={onNext}>
            next
          </button>
        )}
        {step === 2 && <button type="submit">save</button>}
      </div>
    </div>
  </form>
)

export default compose(
  withState('step', 'setStep', 0),
  formHandler({ name: '', email: '', password: '' }),
  withHandlers({
    onPrevious: ({ step, setStep }) => e => {
      e.preventDefault()
      setStep(step - 1)
    },

    onNext: ({ step, setStep }) => e => {
      e.preventDefault()
      setStep(step + 1)
    },

    onSubmit: ({ form }) => e => {
      e.preventDefault()
      // do submit here:
      console.log(form)
    }
  })
)(MyCoolWizard)

utils.js

import { compose, withHandlers, withState } from 'recompose'

// generic form-helper that can be used on any form to manage values
export const withForm = (initialValues, onChange) => compose(
  withState('form', 'setFormValue', initialValues || {}),

  withHandlers({
    setForm: (props) => field => e => {
      const {form, setFormValue} = props
      setFormValue({...form, [field]: e.target.value})
      onChange && onChange(props)(field, e.target.value, e)
    }
  })
)