React Pencil

A delicate React component that enables single-line and multi-line in-place edits. Single-line edits are performed on HTML input whereas multi-line edits are performed on content editable spans.

React-pencil works on modern browsers such as Chrome, Firefox, Safari and IE 11+.

Installation

$ npm i react-pencil

Features

• Single-line in-place edits
• Multi-line in-place edits
• Autosized fields
• Pencil button suffix
• Placeholders
• Error display
• Fully customizable via pass through props
• OnEditDone callback

Examples

Single-line editing

<ReactPencil name='name' value='John Doe'/>

Multi-line editing

<ReactPencil
  name='bio'
  value='Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...'
  className='bio'
  multiline={true}
/>

Placeholders

Single-line

<ReactPencil
  name='firstname'
  placeholder='Type your firstname here...'
/>

Multi-line

<ReactPencil
  name='firstname'
  multiline={true}
  placeholder='Type your bio here...'
/>

Error display

<ReactPencil
  name='email'
  value='@example.com'
  error='Invalid email address'
/>

Callbacks

<ReactPencil value='John Doe' onEditDone={this.onEditDone}/>

Future expansions

• Client side validation
• Support for legacy browsers

Licence

MIT