{"id":21018954,"url":"https://github.com/reactabular/react-edit","last_synced_at":"2025-05-15T06:31:57.348Z","repository":{"id":57141375,"uuid":"74786161","full_name":"reactabular/react-edit","owner":"reactabular","description":"Inline editing utilities for React (MIT)","archived":false,"fork":false,"pushed_at":"2018-04-05T18:39:05.000Z","size":91,"stargazers_count":17,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-02T02:03:27.595Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/reactabular.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-25T20:24:27.000Z","updated_at":"2021-12-16T21:53:32.000Z","dependencies_parsed_at":"2022-09-05T18:40:10.471Z","dependency_job_id":null,"html_url":"https://github.com/reactabular/react-edit","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactabular%2Freact-edit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactabular%2Freact-edit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactabular%2Freact-edit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactabular%2Freact-edit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reactabular","download_url":"https://codeload.github.com/reactabular/react-edit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254288336,"owners_count":22045883,"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":[],"created_at":"2024-11-19T10:28:20.103Z","updated_at":"2025-05-15T06:31:55.121Z","avatar_url":"https://github.com/reactabular.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![build status](https://secure.travis-ci.org/reactabular/react-edit.svg)](http://travis-ci.org/reactabular/react-edit) [![bitHound Score](https://www.bithound.io/github/reactabular/react-edit/badges/score.svg)](https://www.bithound.io/github/reactabular/react-edit) [![codecov](https://codecov.io/gh/reactabular/react-edit/branch/master/graph/badge.svg)](https://codecov.io/gh/reactabular/react-edit)\n\n# react-edit - Inline editing utilities for React\n\n`react-edit` provides a set of inline editing related utilities for React. The library comes with a couple of basic editors and you can implement your own as long as you follow the same interface (`value`, `onValue` props).\n\n## API\n\nThe `edit` transform has been designed to allow inline editing. It expects you to define how to manipulate the state. It also expects you to pass an editor.\n\n**Example:**\n\n```jsx\n...\nimport cloneDeep from 'lodash/cloneDeep';\nimport findIndex from 'lodash/findIndex';\nimport * as edit from 'react-edit';\n\n...\n\n// Define how to manipulate rows through edit.\nconst editable = edit.edit({\n  // Determine whether the current cell is being edited or not.\n  isEditing: ({ columnIndex, rowData }) =\u003e columnIndex === rowData.editing,\n\n  // The user requested activation, mark the current cell as edited.\n  // IMPORTANT! If you stash the rows at this.state.rows, DON'T\n  // mutate it as that will break Table.Body optimization check.\n  //\n  // You also have access to `event` here.\n  onActivate: ({ columnIndex, rowData, event }) =\u003e {\n    event.stopPropagation();\n\n    const index = findIndex(this.state.rows, { id: rowData.id });\n    const rows = cloneDeep(this.state.rows);\n\n    rows[index].editing = columnIndex;\n\n    this.setState({ rows });\n  },\n\n  // Capture the value when the user has finished and update\n  // application state.\n  onValue: ({ value, rowData, property }) =\u003e {\n    const index = findIndex(this.state.rows, { id: rowData.id });\n    const rows = cloneDeep(this.state.rows);\n\n    rows[index][property] = value;\n    rows[index].editing = false;\n\n    this.setState({ rows });\n  },\n\n  // It's possible to shape the value passed to the editor. See\n  // the Excel example for a concrete example.\n  // getEditedValue: v =\u003e v.value\n\n  // If you want to change default value/onValue, you can do it through\n  // editingProps: { value: 'value', onValue: 'onValue' }\n\n  // In case you want to trigger activation using something else than\n  // onClick, adjust it like this:\n  // activateEvent: 'onDoubleClick'\n});\n\n...\n\n// Wrap within an element and render.\nReact.createElement('div', editable(edit.input())(\n  value, { columnIndex, rowData }, { ... custom props ... }\n), (value, extraParameters, props) =\u003e ({\n  children: \u003cdiv\u003e{value}\u003c/div\u003e\n}));\n\n// Or in JSX\n\u003cdiv {...editable(edit.input())(...)} /\u003e\n```\n\n## Editing Interface\n\nAn editor should follow the following interface:\n\n* `({ value, onValue, extraParameters }) =\u003e \u003cReact element\u003e`\n\nIt will receive the current `value` and is expected to emit the result through `onValue` upon completion. You can capture row data, property name, and such through `extraParameters`.\n\n## Editors\n\n`react-edit` provides a few editors by default:\n\n* `edit.boolean({ props: \u003cprops\u003e })` - If the initial value is true, allows setting to false and vice versa. Demo value defaults to false always\n* `edit.dropdown({ options: [[\u003cvalue\u003e, \u003cname\u003e]], props: \u003cprops\u003e })` - The dropdown expects an array of value-name object pairs and emits the selected one.\n* `edit.input({ props: \u003cprops\u003e })` - A wrapper for a regular input.\n\n## Writing a Custom Editor\n\nIf you want to implement a custom editor, you should accept `value` and `onValue` prop pair. The former will contain the current value and `onValue` should return a new one. It can be convenient to curry your editor so that you can pass custom `props` to it easily. Consider the following example.\n\n```jsx\n/*\nimport React from 'react';\nimport PropTypes from 'prop-types';\n*/\n\nconst boolean = ({ props } = {}) =\u003e {\n  const Boolean = ({ value, onValue }) =\u003e (\n    \u003cdiv {...props}\u003e\n      \u003cbutton\n        disabled={value}\n        onClick={() =\u003e onValue(true)}\n      \u003e\u0026#10003;\n      \u003c/button\u003e\n      \u003cbutton\n        disabled={!value}\n        onClick={() =\u003e onValue(false)}\n      \u003e\u0026#10007;\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n  Boolean.propTypes = {\n    value: PropTypes.any,\n    onClick: PropTypes.func,\n    onValue: PropTypes.func\n  };\n\n  return Boolean;\n};\n\nconst Boolean = boolean({ style: {\n  backgroundColor: '#ddd'\n}});\n\n\u003cBoolean value onValue={v =\u003e alert(`You chose ${v}`)} /\u003e\n```\n\n## License\n\nMIT. See LICENSE for details.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactabular%2Freact-edit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactabular%2Freact-edit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactabular%2Freact-edit/lists"}