An editable title implementation for react

An editable title implementation for react

An editable title implementation for react.

react-editable-title Build Status

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'/>

Edit 7w063kppz6


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.


Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate. Thanks :raised_hands:



Github Repository

Tags: #React #Input