# Getting started

[![Test](https://img.shields.io/npm/v/react-easy-edit.svg?style=flat)](https://www.npmjs.com/package/react-easy-edit) [![NPM](https://img.shields.io/npm/dm/react-easy-edit.svg)](https://www.npmjs.com/package/react-easy-edit) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![CircleCI](https://dl.circleci.com/status-badge/img/gh/giorgosart/react-easy-edit/tree/master.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/giorgosart/react-easy-edit/tree/master) [![Known Vulnerabilities](https://snyk.io/test/github/giorgosart/react-easy-edit/badge.svg?targetFile=package.json)](https://snyk.io/test/github/giorgosart/react-easy-edit?targetFile=package.json) [![install size](https://packagephobia.now.sh/badge?p=react-easy-edit@latest)](https://packagephobia.now.sh/result?p=react-easy-edit@latest) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=giorgosart_react-easy-edit\&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=giorgosart_react-easy-edit) [![DeepScan grade](https://deepscan.io/api/teams/6030/projects/7886/branches/87202/badge/grade.svg)](https://deepscan.io/dashboard#view=project\&tid=6030\&pid=7886\&bid=87202)

## 📝 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`

```jsx
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**](https://codesandbox.io/s/react-easy-edit-sandbox-2y97j)!

## 📜 Licence

Copyright © 2023 [George Artemiou](https://github.com/giorgosart).

This project is [MIT licensed](https://github.com/giorgosart/react-easy-edit/blob/master/LICENSE).