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+.
$ npm i react-pencil - 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
<ReactPencil name='name' value='John Doe'/> <ReactPencil name='bio' value='Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...' className='bio' multiline={true} /> <ReactPencil name='firstname' placeholder='Type your firstname here...' /> <ReactPencil name='firstname' multiline={true} placeholder='Type your bio here...' /> <ReactPencil name='email' value='@example.com' error='Invalid email address' /> <ReactPencil value='John Doe' onEditDone={this.onEditDone}/> - Client side validation
- Support for legacy browsers
MIT