react-inline-editable-hoc v1.1.3

React Inline Editable HOC

A simple higher-order component for adding inline editing to any field.

Example

import React from 'react'
import { compose, withStateHandlers } from 'recompose'
import withInline from 'react-inline-editable-hoc'

const BasicInlineField = ({
  isEditing,
  setEditing,
  finishedEditing,
  setTempValue,
  tempValue,
  inputRef,
  value
}) =>
  isEditing ? (
    <input
      onBlur={() => {
        setEditing(false)
        finishedEditing(tempValue)
      }}
      onChange={e => setTempValue(e.target.value)}
      value={tempValue}
      ref={inputRef}
    />
  ) : (
    <span onClick={() => setEditing(true)} onFocus={() => setEditing(true)}>
      {value}
    </span>
  )

const WrappedBasicInlineField = compose(
  withStateHandlers(
    { value: 'Hello World', isEditing: false },
    {
      setEditing: () => isEditing => ({
        isEditing
      }),
      finishedEditing: () => tempValue => ({
        isEditing: false,
        value: tempValue
      })
    }
  ),
  withInline
)(BasicInlineField)

ReactDOM.render(
  <WrappedBasicInlineField />
  document.getElementById('root')
)

Also see the examples inside the example directory. You can run them locally with npm run example.