Package Exports

react-edit-inline

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-edit-inline) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Inline Edit Component for React

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

Example animation gif

Installation

npm install react-edit-inline --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

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);
    }

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

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

    render() {
        return (<div>
            <h2>Edit this string</h2>
            <InlineEdit
              validate={this.customValidateText}
              activeClassName="editing"
              text={this.props.myObject.description}
              paramName="description"
              change={this.dataChanged}
            />
        </div>)
    }
}

export default MyParentComponent;