bfischer / react-inline-editing

An inline, customizable and editable text component built in React.

A simple React inline editing component.

This is an inline, editable text/label component built in React.

The <EditableLabel /> allows the user to simply click and edit text inline. It consists of a <label> element to display the unedited text and an <input /> element to allow editing.

Installation

npm install --save react-inline-editing

Component props

* Required

Prop	Type	Description
text (*)	string	Text to be displayed on both the label and initially in the editor
isEditing	bool	Flags whether the label should be in editor mode
emptyEdit	bool	Flags whether the label should be in editor mode when text is empty('' or undefined)
labelPlaceHolder	string	Label value to display when text is not present
labelClassName	string	Class name for the text styling
labelFontSize	string	Font size for the text
labelFontWeight	string	Font weight for the text
inputMaxLength	number	Max length for the input in editing mode
inputPlaceHolder	string	Placeholder for the input in editing mode
inputWidth	string	Width of the input in editing mode
inputHeight	string	Height of the input in editing mode
inputFontSize	string	Font size for the input in editing mode
inputFontWeight	string	Font weight for the input in editing mode
inputClassName	string	Class name for the input editor's styling
inputBorderWidth	string	Border width for the input in editing mode
onFocus	function	Callback for text focusing. Parameter(s): text
onFocusOut	function	Callback for focus leaving editor. Parameter(s): text

Example

import React from 'react';
import ReactDOM from 'react-dom';
import EditableLabel from 'react-inline-editing';

class App extends React.Component {
    constructor(props){
      super(props);

      this._handleFocus = this._handleFocus.bind(this);
      this._handleFocusOut = this._handleFocusOut.bind(this);
    }

    _handleFocus(text) {
        console.log('Focused with text: ' + text);
    }

    _handleFocusOut(text) {
        console.log('Left editor with text: ' + text);
    }

    render() {
        return <div>
            <EditableLabel text='Hello!'
                labelClassName='myLabelClass'
                inputClassName='myInputClass'
                inputWidth='200px'
                inputHeight='25px'
                inputMaxLength='50'
                labelFontWeight='bold'
                inputFontWeight='bold'
                onFocus={this._handleFocus}
                onFocusOut={this._handleFocusOut}
            />
        </div>
    }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

react-inline-editing's Issues

Thanks

No issue here, just saying that this package is great, and wanted to thank you.

Great work!

How to implement placeholder

Hi there,

Thanks for creating this repo.

I'm currently trying to figure out what's the best way to implement an "empty text" value/placeholder that will be shown on the label if there's no / empty value.

Thanks for your input!

Select all text onfocus event

I cannot select all the text when element focus, because I need event passed to onfocus callback.

this._handleFocus = (text, e) => {
            console.log('Focused with text: ' + text);
            console.log('handle focus', e)
            e.target.select();
}

please help me.

please update bundle

Please update /dist.

If I include the component from pm, then older, built, version is used. To get features like enter keypress I need to copy paste source code and use it directly. Seems like older bundle contains older version

Looks like this repo is dead -> alternative

I uploaded a new package here, I will update it if needed, do not hesitate to open issues:
https://www.npmjs.com/package/react-inline-edition

I added this:

• It is buildable by anybody, just run npm run build
• When editing, just press enter to validate the changes
• The label can be set not to be editable (with the isEditable prop)
• When the label is editable, when the mouse over the label, it highlights itself
• The label is no more a block, you can inline or block whatever you want

Enjoy

inputMaxLength type error

Hi,

I am using React & Redux. I copied your sample code from Readme and got this error message saying

#index.js:1 Warning: Failed prop type: Invalid prop inputMaxLength of type string supplied to EditableLabel, expected number.
at EditableLabel (http://localhost:3000/static/js/0.chunk.js:150704:7)
at CommentDetailForMedia (http://localhost:3000/static/js/main.chunk.js:2201:5

my code is

          <EditableLabel text={this.props.comment.text}
              labelClassName='media-comments-detail'
              inputClassName='media-comments-detail-edit'
              inputMaxLength='144'
              onFocus={this._handleFocus}
              onFocusOut={this._handleFocusOut}
          />

The functionality works, it is just the console has error messages.
I have also tried to

1. change it to inputMaxLength=144 (did not work)
2. delete " inputMaxLength='144" and add maxLength in corresponding CSS (did not work)

I think it is because you set the type of inputMaxLength to number but it is reading as a string...?

Appreciate if you can help!

wrong example on https://www.npmjs.com/package/react-inline-editing

here instead of

import EditableLabel from 'react-inline-edit';

there should be

import EditableLabel from 'react-inline-editing';

How to overide color and other styles?

Update text

Anyway to update the text? I'm changing the value via state, but the component doesn't re-render

isEditing not work

I add isEditing={false} to my code but it's not work. I still can edit them

NPM example wrong

The example on the npm page is importing:

import EditableLabel from 'react-inline-edit';

Cannot edit text

Hi,

I'm using this as such

               <EditableLabel text={hotspot.title}
                    labelClassName='title'
                    inputClassName='title'
                    inputWidth='200px'
                    inputHeight='20px'
                    inputMaxLength={50}
                    onFocus={this._handleFocus}
                    onFocusOut={this._handleFocusOut}
                  />

But the label is not editable. No characters show when I type. The value comes from state. What am I missing?