Skip to content

A delicate React component that enables single-line and multi-line in-place edits

License

Notifications You must be signed in to change notification settings

SokratisVidros/react-pencil

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

A delicate React component that enables single-line and multi-line in-place edits

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages