{"id":27320340,"url":"https://github.com/dcwither/react-editable","last_synced_at":"2025-04-12T09:46:51.576Z","repository":{"id":39254732,"uuid":"107043409","full_name":"dcwither/react-editable","owner":"dcwither","description":"Decorator for maintaining editing state of React components","archived":false,"fork":false,"pushed_at":"2023-01-25T01:03:38.000Z","size":8945,"stargazers_count":5,"open_issues_count":39,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-17T22:06:59.329Z","etag":null,"topics":["decorators","form","higher-order-component","package","react","render-props","state-management"],"latest_commit_sha":null,"homepage":"https://dcwither.github.io/react-editable","language":"TypeScript","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/dcwither.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-15T19:42:34.000Z","updated_at":"2021-03-17T14:33:56.000Z","dependencies_parsed_at":"2023-01-26T03:45:22.418Z","dependency_job_id":null,"html_url":"https://github.com/dcwither/react-editable","commit_stats":null,"previous_names":["dcwither/react-editable-decorator"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcwither%2Freact-editable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcwither%2Freact-editable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcwither%2Freact-editable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcwither%2Freact-editable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dcwither","download_url":"https://codeload.github.com/dcwither/react-editable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248550629,"owners_count":21122930,"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":["decorators","form","higher-order-component","package","react","render-props","state-management"],"created_at":"2025-04-12T09:46:50.957Z","updated_at":"2025-04-12T09:46:51.567Z","avatar_url":"https://github.com/dcwither.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Editable\n\n![typescript](https://aleen42.github.io/badges/src/typescript.svg)\n![Node.js CI](https://github.com/dcwither/react-editable/workflows/Node.js%20CI/badge.svg)\n[![dependencies Status](https://david-dm.org/dcwither/react-editable/status.svg)](https://david-dm.org/dcwither/react-editable)\n[![codecov](https://codecov.io/gh/dcwither/react-editable/branch/master/graph/badge.svg)](https://codecov.io/gh/dcwither/react-editable)\n[![Dependabot Status](https://api.dependabot.com/badges/status?host=github\u0026repo=dcwither/react-editable)](https://dependabot.com)\n\n\nA component that wraps around a form component to provide an editing state that it maintains. Works with promises returned by the Editable methods.\n\nReact Editable can accept anything as its value, making it a generic wrapper for any controlled component that needs a temporary editing state.\n\n## Why Use It?\n\nReact Editable factors out the concerns of temporary state and whether to maintain it in a global store like Redux, or in your own component. It passes through its current state so you can render your component differently depending on whether it's inactive, editing, or waiting on a promise.\n\n## Demo \u0026 Examples\n\nLive demo: https://dcwither.github.io/react-editable/\n\n```\nnpm install\nnpm start\n```\n\nThen open [`localhost:6006`](http://localhost:6006) in a browser\n\n## Usage\n\n```js\nimport React from \"react\";\nimport { Editable, useEditableContext } from \"@dcwither/react-editable\";\n\nfunction Input() {\n  const { value, onCommit, onChange, status } = useEditableContext();\n  handleCommit = () =\u003e {\n    onCommit(\"SUBMIT\");\n  };\n\n  handleChange = evt =\u003e {\n    onChange(evt.target.value);\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cinput\n        className=\"input\"\n        disabled={status === EditableStatus.COMMITTING}\n        onChange={handleChange}\n        value={value}\n      /\u003e\n      \u003cbutton onClick={handleCommit}\u003eSubmit\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n\n// Either wrap in the Editable Component with render props\n\u003cEditable onCommit={handleCommit}\u003e\n  \u003cInput /\u003e\n\u003c/Editable\u003e;\n\n// Or control the flow of your editable props directly with:\nconst { value, onChange, onCommit } = useEditable({\n  value,\n  onChange,\n  onCommit\n});\n```\n\n## State Transitions\n\n![State Transitions](docs/state-machine.svg)\n\n## Arguments\n\n### `Editable`, `useEditable`\n\n| Property   | Type                  | Required | Description                                                   |\n| ---------- | --------------------- | -------- | ------------------------------------------------------------- |\n| `onCancel` | func(value)           | No       | Callback for when editing is canceled                         |\n| `onCommit` | func(message, value)  | No       | Callback for commit changes                                   |\n| `value`    | child.propTypes.value | No       | Unedited value to be passed through to child while presenting |\n\n### `useEditableContext`, `EditableContextConsumer`\n\n**None**\n\n## return value\n\n### `Editable`\n\n**None**\n\n### `useEditable`, `useEditableContext`, `EditableContextConsumer`\n\n| Property   | Type                                     | Description                                                                                    |\n| ---------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------- |\n| `onStart`  | func                                     | Callback that triggers start of editing                                                        |\n| `onCancel` | func                                     | Callback that triggers cancel editing and clears edited value                                  |\n| `onChange` | func(nextValue)                          | Callback that triggers change in edited value                                                  |\n| `onCommit` | func(message)                            | Callback that triggers a commit                                                                |\n| `status`   | 'PRESENTING', 'EDITING', or 'COMMITTING' | Current status of ReactEditable                                                                |\n| `value`    | any                                      | The value passed into Editable if `PRESENTING` or the edited value if `EDITING` or `COMMITING` |\n\n## Commit Event Handler (`onCommit`)\n\nThis will be called when the matching callback passed through to the render prop child is called. If it returns a promise, ReactEditable will remain in a `COMITTING` state until the promise resolves. If ReactEditable unmounts before the promise resolves, it will cancel its promise, and avoid a setState.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdcwither%2Freact-editable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdcwither%2Freact-editable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdcwither%2Freact-editable/lists"}