React-editable-input

Editable input for React.js

Install

$ npm i -S react-editable-input

Example

import EditableInput from 'react-editable-input';

// or var EditableInput = require('react-editable-input').default;

class ExampleComponent extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      text: 'admin'
    }
  }
  
  onSave(value) {
    this.setState({ text: value });
  }
  
  render() {
    return (
      <div className="example">
      
        <EditableInput onSave={this.onSave.bind(this)} text={this.state.text} />
        
      </div>  
    )
  }
}

ReactDOM.render(<ExampleComponent />, document.getElementById('app'));

Props

onSave Function that is called when user clicks submit button. (required)

text String that is displayed. (required)

textClassName ClassName prop of text element. Default editable-input-text

inputClassName ClassName prop of input element. Default editable-input

btnClassName ClassName prop of submit button element. Default editable-input-submit

btnTitle Text inside submit button element. Default Ok

inputType Type of input elemet. Default text

Styles

Add default styles in your index.html.

<link rel="stylesheet" href="../node_modules/react-editable-input/editable_input.css">