An editable title implementation for react.


npm install react-editable-title


import Editable from 'react-editable-title'

handleNewTitle (data) {
    console.log('Your new title is ' + data)

<Editable contentRefs={this.handleNewTitle} name='This is a test text'/>


You can enable/disable both edit button and control buttons of component.

<Editable contentRefs={this.handleNewTitle} name='All buttons are visible' editButton controlButtons />
<Editable contentRefs={this.handleNewTitle} name='Buttons are invisible' />

You can specify which placeholder you would like to present on the input element. It is set to be 'Type here' as default.

<Editable contentRefs={this.handleNewTitle} name='Placeholder example' placeholder='Enter new ID' />

Component also can be controlled by keys. Hit 'Enter' to save or 'Esc' to cancel your edit.


As default, semantic-ui has utilized on this component. It will render via that styling as out of the box but you always can override it with your own css rules.