An editable title implementation for react

by React

react-editable-title

An editable title implementation for react.

View Demo Download Source

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