https://github.com/giorgosart/react-easy-edit
Inline editing library for React
https://github.com/giorgosart/react-easy-edit
editable hacktoberfest inline inline-edit inline-editing react reactjs
Last synced: about 1 year ago
JSON representation
Inline editing library for React
- Host: GitHub
- URL: https://github.com/giorgosart/react-easy-edit
- Owner: giorgosart
- License: mit
- Created: 2019-02-25T13:50:00.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-21T21:44:46.000Z (over 1 year ago)
- Last Synced: 2025-04-27T23:02:35.969Z (about 1 year ago)
- Topics: editable, hacktoberfest, inline, inline-edit, inline-editing, react, reactjs
- Language: JavaScript
- Homepage: https://giorgosart.gitbook.io/react-easy-edit/
- Size: 612 KB
- Stars: 260
- Watchers: 9
- Forks: 47
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/react-easy-edit)
[](https://www.npmjs.com/package/react-easy-edit)
[](https://opensource.org/licenses/MIT)
[](https://dl.circleci.com/status-badge/redirect/gh/giorgosart/react-easy-edit/tree/master) [](https://snyk.io/test/github/giorgosart/react-easy-edit?targetFile=package.json)
[](https://packagephobia.now.sh/result?p=react-easy-edit@latest)
[](https://sonarcloud.io/summary/new_code?id=giorgosart_react-easy-edit)
[](https://deepscan.io/dashboard#view=project&tid=6030&pid=7886&bid=87202)
# react-easy-edit
A React library that allows inline editing on HTML5 input components, try the sandbox **[here](https://codesandbox.io/s/react-easy-edit-sandbox-2y97j)**!
For full library documentation, **[visit this site](https://giorgosart.gitbook.io/react-easy-edit/)**!
**➡️ Want to migrate to v2.0.0? [Read our migration guide to v2.0.0](https://app.gitbook.com/o/OC4eKNGTh1WKPiV8OaB2/s/-LtRacF0wdsFnZlmJASE/migration-guide-to-v2.0.0) ⬅️**
### :pencil: Features
- Supports `input` (most types, even inputs with `datalist`), `textarea`,`radio`, `checkbox`, `tel`, `url` and `select` HTML types
- Validates user input
- Allows customisation on all elements including the save and cancel buttons
- Supports custom editComponent and custom displayComponent for each type
## :rocket: Installation
```npm i react-easy-edit``` or ```yarn add react-easy-edit```
## :pray: Show your support
Give a :star: if this project helped you in any way!
[](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=TUJKB5DPLHA3N¤cy_code=GBP&source=url)
[](https://ko-fi.com/Y8Y611NE2)
## :cool: Props
For the full list of props, please visit **[our documentation site](https://giorgosart.gitbook.io/react-easy-edit/props)**.
## :page_facing_up: Examples
More examples can be found **[here](https://giorgosart.gitbook.io/react-easy-edit/examples)**
#### A simple example - Textbox
```jsx
import React, { Component } from 'react';
import EasyEdit from 'react-easy-edit';
function App() {
const save = (value) => {alert(value)}
const cancel = () => {alert("Cancelled")}
return (
);
}
```
#### Radio buttons
```jsx
```
#### Date
```jsx
```
#### Dropdown
```jsx
```
#### Datalist
```jsx
```
#### Checkboxes
```jsx
```
#### Custom components
When using custom input components, they must be passed in as props, like so:
```jsx
{}}
editComponent={}
displayComponent={}
/>
```
When defining a custom input component, the function ```setParentValue``` is injected into your custom component, which must be called in order to pass the desired value up to the parent ```EasyEdit``` component.
For example, if your component was a text field that needed to set the ```EasyEdit``` value as a user id based on a username entered, you would need to pass the id to ```this.props.setParentValue``` in order to get that value to the ```EasyEdit``` component.
e.g.
```jsx
// Inside your custom input
onChange(searchTerm) {
getUserIdByUsername(searchTerm).then((userId) => {
this.props.setParentValue(userId);
})
}
```
You can use a custom EditComponent and still use the saveOnBlur behavior. An ```onBlur``` function will be passed to your custom component, for you to trigger the behavior.
```jsx
class CustomComponent extends React.Component{
constructor(props){
super(props);
}
render(){
return
Custom editor
;
}
}
```
## :handshake: Contributing
Contributions, issues and feature requests are welcome.
Feel free to check [issues page](https://github.com/giorgosart/react-easy-edit/issues) if you want to contribute.
**Special thanks to all the contributors below for spending their time improving this library**
## :1234: Versioning
For transparency and insight into our release cycle, releases will be numbered with the following format:
```..```
And constructed with the following guidelines:
- Breaking backwards compatibility bumps the major
- New additions without breaking backwards compatibility bumps the minor
- Bug fixes and misc changes bump the patch
- For more information on semantic versioning, please visit http://semver.org/.
## :scroll: Licence
Copyright © 2023 [George Artemiou](https://github.com/giorgosart).
This project is under [MIT license](https://github.com/giorgosart/react-easy-edit/blob/master/LICENSE).