{"id":23721357,"url":"https://github.com/chrisuser/react-basic-contenteditable","last_synced_at":"2025-09-03T21:31:45.194Z","repository":{"id":221901340,"uuid":"755721613","full_name":"ChrisUser/react-basic-contenteditable","owner":"ChrisUser","description":"React 18 contenteditable component. Super-customizable!","archived":false,"fork":false,"pushed_at":"2024-12-27T18:31:42.000Z","size":250,"stargazers_count":1,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-27T19:25:37.245Z","etag":null,"topics":["chat","chatbot","contenteditable","react"],"latest_commit_sha":null,"homepage":"https://chrisuser.github.io/react-basic-contenteditable/","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/ChrisUser.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-10T22:08:01.000Z","updated_at":"2024-12-27T18:31:22.000Z","dependencies_parsed_at":"2024-02-19T23:25:30.500Z","dependency_job_id":"12624f59-e538-4f2f-8fea-ccb47f0ae32b","html_url":"https://github.com/ChrisUser/react-basic-contenteditable","commit_stats":null,"previous_names":["chrisuser/react-basic-contenteditable"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisUser%2Freact-basic-contenteditable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisUser%2Freact-basic-contenteditable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisUser%2Freact-basic-contenteditable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisUser%2Freact-basic-contenteditable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChrisUser","download_url":"https://codeload.github.com/ChrisUser/react-basic-contenteditable/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231919153,"owners_count":18445874,"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":["chat","chatbot","contenteditable","react"],"created_at":"2024-12-30T22:20:22.266Z","updated_at":"2025-09-03T21:31:45.177Z","avatar_url":"https://github.com/ChrisUser.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Basic Contenteditable\n\n![React Basic Content Editable](readme-header-img.png)\n\nA React component that allows you to create an editable area in your application. It's perfect for situations where you need to provide a user-friendly, in-place editing functionality.\n\n## Installation\n\nInstall via npm\n\n```sh\nnpm install --save react-basic-contenteditable\n```\n\nor yarn\n\n```sh\nyarn add react-basic-contenteditable\n```\n\n## Usage\n\nLive **demo** at [https://chrisuser.github.io/react-basic-contenteditable/](https://chrisuser.github.io/react-basic-contenteditable/)\n\n### Example\n\n```javascript\nimport ContentEditable from \"react-basic-contenteditable\"\n\nconst App = () =\u003e {\n  const [content, setContent] = useState(\"\")\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003e{content}\u003c/div\u003e\n      \u003cContentEditable\n        placeholder=\"Type here\"\n        containerClassName=\"container-class\"\n        contentEditableClassName=\"contenteditable-class\"\n        placeholderClassName=\"placeholder-class\"\n        onChange={(content) =\u003e setContent(content)}\n      /\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App\n```\n\n### Props\n\n\u003e All props are optional, that's how you can **fully customize** it!\n\n| Name                     | Optional | Type                | Description                                                                 |\n| ------------------------ | -------- | ------------------- | --------------------------------------------------------------------------- |\n| containerClassName       | ✔️       | `string`            | Custom classes for the wrapper div                                          |\n| contentEditableClassName | ✔️       | `string`            | Custom classes for the input element                                        |\n| placeholderClassName     | ✔️       | `string`            | Custom classes for the placeholder text                                     |\n| charsCounterClassName    | ✔️       | `string`            | Custom classes for the character counter text (if `maxLength` is specified) |\n| placeholder              | ✔️       | `string`            | Input placeholder text                                                      |\n| disabled                 | ✔️       | `boolean`           | Flag that disables the input element                                        |\n| maxLength                | ✔️       | `number`            | Indicates the maximum number of characters a user can enter                 |\n| autoFocus                | ✔️       | `boolean`           | Flag to automatically focus the input element on mount                      |\n| updatedContent           | ✔️       | `string`            | Text injected from parent element into the input as the current value       |\n| onContentExternalUpdate  | ✔️       | `(content) =\u003e void` | Method that emits the injected content by the `updatedContent` prop         |\n| onChange                 | ✔️       | `(content) =\u003e void` | Method that emits the current content as a string                           |\n| onKeyUp                  | ✔️       | `(e) =\u003e void`       | Method that emits the keyUp keyboard event                                  |\n| onKeyDown                | ✔️       | `(e) =\u003e void`       | Method that emits the keyDown keyboard event                                |\n| onFocus                  | ✔️       | `(e) =\u003e void`       | Method that emits the focus event                                           |\n| onBlur                   | ✔️       | `(e) =\u003e void`       | Method that emits the blur event                                            |\n\n### Keyboard shortcuts\n\n- Undo: `Ctrl + Z`\n- Redo: `Ctrl + Y` / `Ctrl + Shift + Z`\n\n## Contribution\n\nIf you have a suggestion that would make this component better feel free to fork the project and open a pull request or create an issue for any idea or bug you find.\\\nRemeber to follow the [Contributing Guidelines](https://github.com/ChrisUser/.github/blob/main/CONTRIBUTING.md).\n\n## Licence\n\nReact Basic Contenteditable is [MIT licensed](https://github.com/ChrisUser/react-basic-contenteditable/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisuser%2Freact-basic-contenteditable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisuser%2Freact-basic-contenteditable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisuser%2Freact-basic-contenteditable/lists"}