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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent