Skip to content

Latest commit

 

History

History
76 lines (50 loc) · 1.58 KB

README.md

File metadata and controls

76 lines (50 loc) · 1.58 KB
Raw

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

TEXT edition demo: Alt text

Installation

npm install react-editables --save

Usage

Import the components you want to use in your app:

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

EditableText

<EditableText value='some value here' placeholder='Write a description' />

EditableNumber

<EditableNumber value={777} onChange={(value) => 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.

  doValidation (value) {
    return (value.length > 30)
  }
<EditableText validate={this.doValidation} />

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 :)