Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

react-edit-inline

1.0.8 • Public • Published

Inline Edit Component 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 <input /> when focused, and tries to validate and save input on Enter or blur. Esc works as well for cancelling.

Example animation gif

Watch a demo, then check out demo/index.jsx for a quick example.

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
  • 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.

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

install

npm i react-edit-inline

Downloadsweekly downloads

1,220

version

1.0.8

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability