Inline Edit Component - TextArea Mod for React

Before you continue, check out a successor to this repo: React Inline Edit Kit. It is more functional, and will be maintained in future.

This is a simple React component for in-place text editing. It turns into an <textarea /> when focused, and tries to validate and save input on Enter or blur. Esc works as well for cancelling.

Tabs can be used to move through the textarea fields, pressing enter will open the field for editing.

If there is a parent div with the class container-fluid, a class is added to the 'editingResume' class is added to the container.

The textarea is auto sized to fit current size of text content.

Installation

npm install react-edit-inline-textarea --save-dev

Required props

• text:string initial text
• paramName:string name of the parameter to be returned to change function
• change:function function to call when new text is changed and validated, it will receive {paramName: value}

Optional props

• className:string CSS class name
• activeClassName:string CSS class replacement for when in edit mode
• validate:function boolean function for custom validation, using this overrides the two props below
• minLength:number minimum text length, default 1
• maxLength:number maximum text length, default 256
• editingElement:string element name to use when in edit mode (DOM must have value property) default input
• staticElement:string element name for displaying data default span
• editing:boolean If true, element will be in edit mode
• tabIndex:number tab index used for focusing with TAB key default 0
• stopPropagation:boolean If true, the event onClick will not be further propagated.

Dependencies

Requires jquery for the tab and enter behaviors. Requires autosize for making sure text areas are sized correctly.

Usage example

import React from 'react';
import InlineEdit from 'react-edit-inline';

class MyParentComponent extends React.Component {

    constructor(props){
      super(props);
      this.dataChanged = this.dataChanged.bind(this);
      this.state = {
        message: 'ReactInline demo'
      }
    }

    dataChanged(data) {
        // data = { description: "New validated text comes here" }
        // Update your model from here
        console.log(data)
        this.setState({...data})
    }

    customValidateText(text) {
      return (text.length > 0 && text.length < 64);
    }

    render() {
        return (<div>
            <h2>{this.state.message}</h2>
            <span>Edit me: </span>
            <InlineEdit
              validate={this.customValidateText}
              activeClassName="editing"
              text={this.state.message}
              paramName="message"
              change={this.dataChanged}
              style={{
                backgroundColor: 'yellow',
                minWidth: 150,
                display: 'inline-block',
                margin: 0,
                padding: 0,
                fontSize: 15,
                outline: 0,
                border: 0
              }}
            />
        </div>)
    }
}