https://github.com/sokratisvidros/react-pencil

A delicate React component that enables single-line and multi-line in-place edits
https://github.com/sokratisvidros/react-pencil

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/sokratisvidros/react-pencil
• Owner: SokratisVidros
• License: mit
• Created: 2016-06-04T07:00:24.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-25T01:15:54.000Z (almost 2 years ago)
• Last Synced: 2024-10-05T02:25:52.850Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 623 KB
• Stars: 22
• Watchers: 2
• Forks: 3
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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.

![](http://g.recordit.co/vzoEKt6pIc.gif)

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

```

```

### Multi-line editing

```

```

### Placeholders

#### Single-line

```

```

#### Multi-line

```

```

### Error display

```

```

### Callbacks

```

```

## Future expansions

- Client side validation

- Support for legacy browsers

## Licence

MIT