{"id":27896349,"url":"https://github.com/giorgosart/react-easy-edit","last_synced_at":"2025-05-16T12:10:35.807Z","repository":{"id":34239710,"uuid":"172514655","full_name":"giorgosart/react-easy-edit","owner":"giorgosart","description":"Inline editing library for React","archived":false,"fork":false,"pushed_at":"2024-10-21T21:44:46.000Z","size":627,"stargazers_count":260,"open_issues_count":4,"forks_count":47,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-27T23:02:35.969Z","etag":null,"topics":["editable","hacktoberfest","inline","inline-edit","inline-editing","react","reactjs"],"latest_commit_sha":null,"homepage":"https://giorgosart.gitbook.io/react-easy-edit/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/giorgosart.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"open_collective":"react-easy-edit","ko_fi":"giorgosart","custom":["https://www.paypal.me/giorgosart"]}},"created_at":"2019-02-25T13:50:00.000Z","updated_at":"2025-03-23T15:56:13.000Z","dependencies_parsed_at":"2023-11-08T13:02:34.169Z","dependency_job_id":"728fb52d-d4ec-4b18-afc4-318d0ad02579","html_url":"https://github.com/giorgosart/react-easy-edit","commit_stats":{"total_commits":248,"total_committers":17,"mean_commits":"14.588235294117647","dds":0.25,"last_synced_commit":"5a108a60afef92b8481f9b65b5eb2d4ce9fd4592"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giorgosart%2Freact-easy-edit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giorgosart%2Freact-easy-edit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giorgosart%2Freact-easy-edit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giorgosart%2Freact-easy-edit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/giorgosart","download_url":"https://codeload.github.com/giorgosart/react-easy-edit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252044376,"owners_count":21685618,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editable","hacktoberfest","inline","inline-edit","inline-editing","react","reactjs"],"created_at":"2025-05-05T16:37:38.631Z","updated_at":"2025-05-05T16:37:41.559Z","avatar_url":"https://github.com/giorgosart.png","language":"JavaScript","funding_links":["https://opencollective.com/react-easy-edit","https://ko-fi.com/giorgosart","https://www.paypal.me/giorgosart","https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=TUJKB5DPLHA3N\u0026currency_code=GBP\u0026source=url","https://ko-fi.com/Y8Y611NE2"],"categories":[],"sub_categories":[],"readme":"[![Test](https://img.shields.io/npm/v/react-easy-edit.svg?style=flat)](https://www.npmjs.com/package/react-easy-edit)\n[![NPM](https://img.shields.io/npm/dm/react-easy-edit.svg)](https://www.npmjs.com/package/react-easy-edit)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![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)\n[![install size](https://packagephobia.now.sh/badge?p=react-easy-edit@latest)](https://packagephobia.now.sh/result?p=react-easy-edit@latest)\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=giorgosart_react-easy-edit\u0026metric=alert_status)](https://sonarcloud.io/summary/new_code?id=giorgosart_react-easy-edit)\n[![DeepScan grade](https://deepscan.io/api/teams/6030/projects/7886/branches/87202/badge/grade.svg)](https://deepscan.io/dashboard#view=project\u0026tid=6030\u0026pid=7886\u0026bid=87202)\n\n![](https://i.imgur.com/vwqcqeD.gif)\n\n# react-easy-edit\nA React library that allows inline editing on HTML5 input components, try the sandbox **[here](https://codesandbox.io/s/react-easy-edit-sandbox-2y97j)**!\n\nFor full library documentation, **[visit this site](https://giorgosart.gitbook.io/react-easy-edit/)**!\n\n**➡️ 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) ⬅️**\n\n### :pencil: Features\n- Supports `input` (most types, even inputs with `datalist`), `textarea`,`radio`, `checkbox`, `tel`, `url` and `select` HTML types\n- Validates user input\n- Allows customisation on all elements including the save and cancel buttons\n- Supports custom editComponent and custom displayComponent for each type\n\n## :rocket: Installation\n```npm i react-easy-edit``` or ```yarn add react-easy-edit```\n\n## :pray: Show your support\nGive a :star: if this project helped you in any way!\n\n[![paypal](https://www.paypalobjects.com/en_GB/i/btn/btn_donate_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=TUJKB5DPLHA3N\u0026currency_code=GBP\u0026source=url)\n[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/Y8Y611NE2)\n\n## :cool: Props\nFor the full list of props, please visit **[our documentation site](https://giorgosart.gitbook.io/react-easy-edit/props)**.\n\n## :page_facing_up: Examples\nMore examples can be found **[here](https://giorgosart.gitbook.io/react-easy-edit/examples)**\n#### A simple example - Textbox\n```jsx\nimport React, { Component } from 'react';\nimport EasyEdit from 'react-easy-edit';\n\nfunction App() {\n\n  const save = (value) =\u003e {alert(value)}\n  const cancel = () =\u003e {alert(\"Cancelled\")}\n\n  return (\n    \u003cEasyEdit\n      type=\"text\"\n      onSave={save}\n      onCancel={cancel}\n      saveButtonLabel=\"Save Me\"\n      cancelButtonLabel=\"Cancel Me\"\n      inputAttributes={{ name: \"awesome-input\", id: 1}}\n      instructions=\"Star this repo!\"\n    /\u003e\n  );\n}\n```\n\n#### Radio buttons\n```jsx\n\u003cEasyEdit\n  type=\"radio\"\n  value=\"one\"\n  onSave={save}\n  options={[\n      {label: 'First option', value: 'one'},\n      {label: 'Second option', value: 'two'}]}\n  instructions=\"Custom instructions\"\n/\u003e\n```\n\n#### Date\n```jsx\n\u003cEasyEdit\n  type=\"date\"\n  onSave={save}\n  instructions=\"Select your date of birth\"\n/\u003e\n```\n\n#### Dropdown\n```jsx\n\u003cEasyEdit\n  type=\"select\"\n  options={[\n      {label: 'First option', value: 'one'},\n      {label: 'Second option', value: 'two'}]}\n  onSave={save}\n  placeholder=\"My Placeholder\"\n  instructions=\"Custom instructions\"\n/\u003e\n```\n\n#### Datalist\n```jsx\n\u003cEasyEdit\n  type=\"datalist\"\n  options={[\n      {label: 'First option', value: 'one'},\n      {label: 'Second option', value: 'two'}]}\n  onSave={save}\n  instructions=\"Custom instructions\"\n/\u003e\n```\n\n#### Checkboxes\n```jsx\n\u003cEasyEdit\n  type=\"checkbox\"\n  options={[\n      {label: 'First option', value: 'one'},\n      {label: 'Second option', value: 'two'}]}\n  onSave={save}\n  value={['one', 'two']} // this will preselect both options\n/\u003e\n```\n\n#### Custom components\n\nWhen using custom input components, they must be passed in as props, like so:\n```jsx\n\u003cEasyEdit\n    type=\"text\"\n    onSave={() =\u003e {}}\n    editComponent={\u003cCustomInput /\u003e}\n    displayComponent={\u003cCustomDisplay /\u003e}\n/\u003e\n```\n\nWhen 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.\n\nFor 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.\n\ne.g.\n```jsx\n// Inside your custom input\n\nonChange(searchTerm) {\n  getUserIdByUsername(searchTerm).then((userId) =\u003e {\n    this.props.setParentValue(userId);\n  })\n}\n```\n\nYou 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.\n\n```jsx\nclass CustomComponent extends React.Component{\n  constructor(props){\n    super(props);\n  }\n\n  render(){\n    return \u003cdiv\u003e\n      \u003cp\u003eCustom editor\u003c/p\u003e\n      \u003cinput onBlur={this.props.onBlur} /\u003e\n    \u003c/div\u003e;\n  }\n}\n```\n\n## :handshake: Contributing\nContributions, issues and feature requests are welcome.\n\nFeel free to check [issues page](https://github.com/giorgosart/react-easy-edit/issues) if you want to contribute.\n\n**Special thanks to all the contributors below for spending their time improving this library**\n\u003cbr\u003e\n\u003ca href=\"https://github.com/giorgosart/react-easy-edit/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=giorgosart/react-easy-edit\" /\u003e\n\u003c/a\u003e\n\n## :1234: Versioning\nFor transparency and insight into our release cycle, releases will be numbered with the following format:\n\n```\u003cmajor\u003e.\u003cminor\u003e.\u003cpatch\u003e```\n\nAnd constructed with the following guidelines:\n\n- Breaking backwards compatibility bumps the major\n- New additions without breaking backwards compatibility bumps the minor\n- Bug fixes and misc changes bump the patch\n- For more information on semantic versioning, please visit http://semver.org/.\n\n## :scroll: Licence\nCopyright © 2023 [George Artemiou](https://github.com/giorgosart).\n\nThis project is under [MIT license](https://github.com/giorgosart/react-easy-edit/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiorgosart%2Freact-easy-edit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgiorgosart%2Freact-easy-edit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiorgosart%2Freact-easy-edit/lists"}