react-easy-edit
  • ➡️Getting started
  • 🔥Migration Guide to v2.0.0
  • 📖Props
  • 👀Examples
    • Auto Cancelling
    • Auto Submitting
    • Button Positioning
    • Custom Buttons 🔥
    • Custom Display Component
    • Custom Input Component
    • Preventing Edit
    • OnBlur
    • Enable the Delete button 🔥
    • Toggle edit mode for multiple components 🔥
  • 👾Styling
  • 🆗Validation
  • 🤝Contribute
Powered by GitBook
On this page
  • 📝 Features
  • 🚀Installation
  • With NPM
  • With Yarn
  • A simple example - Textbox
  • 📜 Licence

Getting started

A React library that allows inline editing on HTML5 input components

NextMigration Guide to v2.0.0

Last updated 6 months ago

📝 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

$ 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!"
    />
  );
}

📜 Licence

If you want to just play around with this library, feel free to try the sandbox !

Copyright © 2023 .

This project is .

➡️
here
George Artemiou
MIT licensed