An editable title implementation for react Sample in 2020

An editable title implementation for react Sample in 2020


tutorials -

react-editable-title

An editable title implementation for react.

Installation

npm install react-editable-title

Usage

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

Features

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.

Styling

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.

GitHub

Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff