https://github.com/niwaa/react-editables

React-editables is a react component that makes it easy to edit different types of content (Text, Numbers for now)
https://github.com/niwaa/react-editables

content-editable editable editor react

Last synced: over 1 year ago
JSON representation

React-editables is a react component that makes it easy to edit different types of content (Text, Numbers for now)

• Host: GitHub
• URL: https://github.com/niwaa/react-editables
• Owner: niwaa
• License: mit
• Created: 2017-10-28T00:00:42.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-10-30T21:20:02.000Z (over 8 years ago)
• Last Synced: 2025-02-27T04:46:32.904Z (over 1 year ago)
• Topics: content-editable, editable, editor, react
• Language: JavaScript
• Size: 67.4 KB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-editables

React-editables is a react component that makes it easy to edit different types of content (Text, Numbers for now). 

Use-cases are collaborative apps where users may edit the content, in a controlled way.

*NUMBER edition demo:*

![Alt text](https://i.imgur.com/sYnFago.gif "Gif showing number edition")

*TEXT edition demo:*

![Alt text](https://i.imgur.com/aIoJTpA.gif "Gif showing number edition")

## Installation

`npm install react-editables --save`

## Usage

Import the components you want to use in your app:

```javascript

import { EditableText, EditableNumber } from 'react-editables'

```

### EditableText

```javascript

```

### EditableNumber

```javascript

 console.log(value)} />

```

##  Common props

### Optional

* **value**: initial displayed value.

* **validate**: a validator function, returning a boolean.

* **placeholder**: a default text or number when there is not value.

Validation function example:  Text length must be more than 30 char.

```javascript

  doValidation (value) {

    return (value.length > 30)

  }

```

```javascript

```

### Hooks

* **onChange**: a callback function that will be called after user finish editing.

## Contributing

Submit a PR.

### Tests

Tests are written with Jest and Enzyme. Run them with:

``` npm test ```

## To-do

* Expose customization (styles)

* EditableLink element

* EditableTags element

* Add more tests

* Make it work on mobile iOS

* More content types :)