➡️Getting started
A React library that allows inline editing on HTML5 input components
📝 Features
Supports
input
(most types, even inputs withdatalist
),textarea
andselect
HTML typesValidates 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
$ npm i react-easy-edit
With Yarn
$ yarn add react-easy-edit
... 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
import React, { Component } from 'react';
import EasyEdit, {Types} from 'react-easy-edit';
function App() {
const save = (value) => {console.log(value)}
const cancel = () => {console.log("Cancelled")}
return (
<EasyEdit
type={Types.TEXT}
onSave={save}
onCancel={cancel}
saveButtonLabel="Save Me"
cancelButtonLabel="Cancel Me"
attributes={{ name: "awesome-input", id: 1}}
instructions="Star this repo!"
/>
);
}
If you want to just play around with this library, feel free to try the sandbox here!
📜 Licence
Copyright © 2023 George Artemiou.
This project is MIT licensed.
Last updated