{"id":13422151,"url":"https://github.com/lovasoa/react-contenteditable","last_synced_at":"2025-06-11T13:12:31.143Z","repository":{"id":25143951,"uuid":"28566231","full_name":"lovasoa/react-contenteditable","owner":"lovasoa","description":"React component for a div with editable contents","archived":false,"fork":false,"pushed_at":"2023-03-15T11:39:58.000Z","size":2438,"stargazers_count":1657,"open_issues_count":47,"forks_count":219,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-05-08T20:04:24.488Z","etag":null,"topics":["contenteditable","editing","html","react","react-component","text","wysiwyg"],"latest_commit_sha":null,"homepage":"http://npmjs.com/package/react-contenteditable","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lovasoa.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2014-12-28T16:29:46.000Z","updated_at":"2025-05-08T06:01:30.000Z","dependencies_parsed_at":"2024-01-25T05:09:32.632Z","dependency_job_id":"391b5581-3b30-4570-a10e-2e0ad1527846","html_url":"https://github.com/lovasoa/react-contenteditable","commit_stats":{"total_commits":165,"total_committers":39,"mean_commits":4.230769230769231,"dds":0.696969696969697,"last_synced_commit":"ec221521e0da0d6d96ea32e6b8ed54666957824a"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lovasoa%2Freact-contenteditable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lovasoa%2Freact-contenteditable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lovasoa%2Freact-contenteditable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lovasoa%2Freact-contenteditable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lovasoa","download_url":"https://codeload.github.com/lovasoa/react-contenteditable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254110374,"owners_count":22016391,"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":["contenteditable","editing","html","react","react-component","text","wysiwyg"],"created_at":"2024-07-30T23:00:38.142Z","updated_at":"2025-05-14T09:06:25.603Z","avatar_url":"https://github.com/lovasoa.png","language":"TypeScript","funding_links":[],"categories":["UI Components","Uncategorized","TypeScript","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["Form Components","Uncategorized"],"readme":"react-contenteditable\n=====================\n\nReact component for a div with editable contents\n\n[![Build Status](https://travis-ci.org/lovasoa/react-contenteditable.svg?branch=master)](https://travis-ci.org/lovasoa/react-contenteditable)\n[![download count](https://img.shields.io/npm/dm/react-contenteditable.svg)](https://www.npmjs.com/package/react-contenteditable)\n[![bundle size](https://img.shields.io/bundlephobia/minzip/react-contenteditable.svg)](https://www.npmjs.com/package/react-contenteditable)\n[![license](https://img.shields.io/github/license/lovasoa/react-contenteditable.svg)](https://github.com/lovasoa/react-contenteditable/blob/master/LICENSE)\n\n\n## Install\n\n```sh\nnpm install react-contenteditable\n```\n\n## Usage\n\n```javascript\nimport React from 'react'\nimport ContentEditable from 'react-contenteditable'\n\nclass MyComponent extends React.Component {\n  constructor() {\n    super()\n    this.contentEditable = React.createRef();\n    this.state = {html: \"\u003cb\u003eHello \u003ci\u003eWorld\u003c/i\u003e\u003c/b\u003e\"};\n  };\n\n  handleChange = evt =\u003e {\n    this.setState({html: evt.target.value});\n  };\n\n  render = () =\u003e {\n    return \u003cContentEditable\n              innerRef={this.contentEditable}\n              html={this.state.html} // innerHTML of the editable div\n              disabled={false}       // use true to disable editing\n              onChange={this.handleChange} // handle innerHTML change\n              tagName='article' // Use a custom HTML tag (uses a div by default)\n            /\u003e\n  };\n};\n```\n\n## Available props\n|prop|description|type|\n|--|----|----|\n|innerRef|element's [`ref` attribute](https://reactjs.org/docs/refs-and-the-dom.html)|Object \\| Function|\n|html|**required:** innerHTML of the editable element|String|\n|disabled|use true to disable editing|Boolean|\n|onChange|called whenever `innerHTML` changes|Function|\n|onBlur|called whenever the html element is [blurred](https://developer.mozilla.org/en-US/docs/Web/Events/blur)|Function|\n|onFocus|event fires when an element has received [focus](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event)|Function|\n|onKeyUp|called whenever a key is released|Function|\n|onKeyDown|called whenever a key is pressed |Function|\n|className|the element's [CSS class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class)|String|\n|style|a collection of CSS properties to apply to the element|Object|\n\n## Known Issues\nIf you are using hooks, please see [this issue](https://github.com/lovasoa/react-contenteditable/issues/161). Using this component with [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate) doesn't work, but you can still use [`useRef`](https://reactjs.org/docs/hooks-reference.html#useref) : \n\n```js\nconst text = useRef('');\n\nconst handleChange = evt =\u003e {\n    text.current = evt.target.value;\n};\n\nconst handleBlur = () =\u003e {\n    console.log(text.current);\n};\n\nreturn \u003cContentEditable html={text.current} onBlur={handleBlur} onChange={handleChange} /\u003e\n```\n\n## Examples\n\nYou can try **react-contenteditable** right from your browser to see if it fits your project's needs:\n\n * [Simple example](https://codesandbox.io/s/4rlw34mnk7) : just an editable `\u003cdiv\u003e` with a default value.\n * [Advanced example](https://codesandbox.io/s/l91xvkox9l) : custom tag, input sanitization, and rich text edition.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flovasoa%2Freact-contenteditable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flovasoa%2Freact-contenteditable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flovasoa%2Freact-contenteditable/lists"}