niwaa / react-editables

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

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:

TEXT edition demo:

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