Nine-Pin Masters

    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

    455

    Version

    1.0.8

    License

    MIT

    Last publish

    Collaborators

    • kaivi