React Editable Inline

A simple component for adding inline editing to any field.

Introduction

React Editable Inline makes heavy use of render props to manage state related to your inline editable components. Using this general component, you can achieve:

• Only displaying current canonical values when editing is complete, or optimistic local updates
• Disallowing leaving edit mode until the input validates
• Additional functionality in edit mode, like a delete button
• Automatically select all input text when edit mode is enabled

Example

import React from 'react'

import EditableInline from 'react-editable-inline'

const BasicInlineField = ({ onChange, value }) => (
  <EditableInline
    render={({ isEditing, startEditing, finishEditing, inputProps }) =>
      isEditing ? (
        <input onBlur={() => finishEditing(inputProps.value)} {...inputProps} />
      ) : (
        <span onClick={() => startEditing()} onFocus={() => startEditing()}>
          {value}
        </span>
      )
    }
    onChange={onChange}
    value={value}
  />
)

ReactDOM.render(
  <BasicInlineField onChange={newValue => console.log(newValue)} value="hi" />
  document.getElementById('root')
)

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