inline-edit-input-value v1.0.2

A beautiful inline editing input field component

In this NPM package with you can easily edit your input field with lebel. Users can easily click on lebels and edit text inline.

Installation

npm install --save inline-edit-input-value

Component props

* Required

#Example

import React from 'react';
import InlineEditInput from './InlineEditInput'

class App extends React.Component {

  handleFocus = (text) => {
      console.log('Focused with value: ' + text.value);
      console.log('Focused with name: ' + text.name);
  }

  handleFocusOut = (text) => {
      console.log('Left editor with value: ' + text.value);
      console.log('Left editor with name: ' + text.name);
  }

  render() {
    return (
      <div className="App">
        <InlineEditInput
          text='Ranjeet Kumar!'
          name='full-name'
          labelClassName='myLabelClass'
          inputClassName='myInputClass'
          inputWidth='200px'
          inputHeight='25px'
          inputMaxLength='50'
          labelFontWeight='bold'
          inputFontWeight='bold'
          onFocus={this.handleFocus}
          onFocusOut={this.handleFocusOut}
        />
      </div>
    );
  }
}

export default App;