Getting started
A React library that allows inline editing on HTML5 input components

📝 Features

  • Supports input (most types, even inputs with datalist), textarea and select HTML types
  • Validates user input via a user-defined validation function
  • Allows customisation on all elements including the save and cancel buttons
  • Supports custom editComponent and custom displayComponent for each type

🚀Installation

With NPM

1
$ npm i react-easy-edit
Copied!

With Yarn

1
$ yarn add react-easy-edit
Copied!
... and that's it, you are ready to go.

A simple example - Textbox

React-easy-edit supports most html input types like text, number, color, date, datetime-local,time , month, week, radio, email, checkbox,range ,datalist as well as textarea and select
1
import React, { Component } from 'react';
2
import EasyEdit, {Types} from 'react-easy-edit';
3
4
function App() {
5
6
const save = (value) => {console.log(value)}
7
const cancel = () => {console.log("Cancelled")}
8
9
return (
10
<EasyEdit
11
type={Types.TEXT}
12
onSave={save}
13
onCancel={cancel}
14
saveButtonLabel="Save Me"
15
cancelButtonLabel="Cancel Me"
16
attributes={{ name: "awesome-input", id: 1}}
17
instructions="Star this repo!"
18
/>
19
);
20
}
Copied!
If you want to just play around with this library, feel free to try the sandbox here!

📜 Licence

Copyright © 2020 George Artemiou.
This project is MIT licensed.
Last modified 1yr ago