An editable title implementation for react Sample in 2020

An editable title implementation for react Sample in 2020

tutorials -


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.


Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff