{"id":19818832,"url":"https://github.com/ceamkrier/react-editable-title","last_synced_at":"2025-05-01T11:32:29.737Z","repository":{"id":34073711,"uuid":"168028137","full_name":"CeamKrier/react-editable-title","owner":"CeamKrier","description":"An editable title implementation for the react :milky_way:","archived":false,"fork":false,"pushed_at":"2023-02-28T07:45:33.000Z","size":1429,"stargazers_count":2,"open_issues_count":10,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-14T14:48:30.336Z","etag":null,"topics":["customizable","editable-text","react"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/7w063kppz6","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CeamKrier.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":"2019-01-28T20:02:51.000Z","updated_at":"2022-11-15T09:53:28.000Z","dependencies_parsed_at":"2023-01-15T04:25:55.855Z","dependency_job_id":null,"html_url":"https://github.com/CeamKrier/react-editable-title","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CeamKrier%2Freact-editable-title","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CeamKrier%2Freact-editable-title/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CeamKrier%2Freact-editable-title/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CeamKrier%2Freact-editable-title/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CeamKrier","download_url":"https://codeload.github.com/CeamKrier/react-editable-title/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224253290,"owners_count":17280936,"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":["customizable","editable-text","react"],"created_at":"2024-11-12T10:17:02.591Z","updated_at":"2024-11-12T10:17:03.116Z","avatar_url":"https://github.com/CeamKrier.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-editable-title [![Build Status](https://travis-ci.org/CeamKrier/react-editable-title.svg?branch=master)](https://travis-ci.org/CeamKrier/react-editable-title)\n\nAn editable title implementation for react.\n\n## Installation\n\n\n\n```\nnpm install react-editable-title\n```\n\n## Usage\n\n```javascript\nimport React, { useState } from 'react'\nimport Editable from 'react-editable-title'\n\nconst App = () =\u003e {\n  const [text, setText] = useState('')\n\n  const handleTextUpdate = (current: string) =\u003e {\n    setText(current)\n  }\n\n  return (\n        \u003cEditable \n          text={text} \n          editButton\n          editControls\n          placeholder=\"Type here\"\n          cb={handleTextUpdate}\n         /\u003e\n  )\n}\n\n```\n\n[![Edit 7w063kppz6](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/7w063kppz6)\n\n## API\n\n| Attribute                | Type            | Description                                                        | Required |\n|--------------------------|-----------------|--------------------------------------------------------------------|----------|\n| `text`                   | `string`        | Text to be displayed                                               | **Yes**  |\n| `textStyle`              | `CSSProperties` | Custom text styling                                                | No       |\n| `cb`                     | `function`      | Invoked when the text has been edited                              | **Yes**  |\n| `onEditCancel`           | `function`      | Invoked when the edit has been canceled                            | No       |\n| `onValidationFail`       | `function`      | Invoked when the text hasn't matched the regex                     | No       |\n| `editButton`             | `boolean`       | Sets the visibility of the edit button. **Default** is `false`     | No       |\n| `editButtonStyle`        | `CSSProperties` | Custom edit button styling                                         | No       |\n| `editControlButtons`     | `boolean`       | Sets the visibility of the control buttons. **Default** is `false` | No       |\n| `saveButtonStyle`        | `CSSProperties` | Custom save button styling                                         | No       |\n| `cancelButtonStyle`      | `CSSProperties` | Custom cancel button styling                                       | No       |\n| `placeholder`            | `string`        | Placeholder text of the input element                              | No       |\n| `saveOnBlur`             | `boolean`       | Attempts to save text input on unfocus. **Default** is `true`      | No       |\n| `seamlessInput`          | `boolean`       | Presents text-editor alike experience. **Default** is `false`      | No       |\n| `inputStyle`             | `CSSProperties` | Custom input styling                                               | No       |\n| `isFocused`              | `boolean`       | Externally sets the state of input focus. **Default** is `false`   | No       |\n| `inputPattern`           | `string`        | Regex pattern of desired input                                     | No       |\n| `inputErrorMessage`      | `string`        | Info message about mismatch of input                               | No       |\n| `inputErrorMessageStyle` | `CSSProperties` | Custom error message styling                                       | No       |\n| `inputMinLength`         | `number`        | Min length accepted as an input                                    | No       |\n| `inputMaxLength`         | `number`        | Max length accepted as an input                                    | No       |\n\n\n\n\n## Features\nThe component can be controlled by keyboard keys. Hit **Enter** to save or **Esc** to cancel your edit.\nIf there is **no** change in the text, neither **Enter** nor the **Edit** button would work.\n\nYou also can control the validity of inputs with the **regex** you would provide. If the regex won't match the user input\nthen your desired **error message** will be shown below of the input field.\n\n## Contributing\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\nPlease make sure to update tests as appropriate.\nThanks :raised_hands:\n\n\n## License\n[GPL](https://choosealicense.com/licenses/gpl-3.0/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fceamkrier%2Freact-editable-title","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fceamkrier%2Freact-editable-title","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fceamkrier%2Freact-editable-title/lists"}