Skip to content

Simple React component for in-place text editing and validation

License

Notifications You must be signed in to change notification settings

OpenGov/ReactInlineEdit

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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;

About

Simple React component for in-place text editing and validation

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%