https://github.com/ceamkrier/react-editable-title
An editable title implementation for the react :milky_way:
https://github.com/ceamkrier/react-editable-title
customizable editable-text react
Last synced: about 1 year ago
JSON representation
An editable title implementation for the react :milky_way:
- Host: GitHub
- URL: https://github.com/ceamkrier/react-editable-title
- Owner: CeamKrier
- License: gpl-3.0
- Created: 2019-01-28T20:02:51.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T07:45:33.000Z (over 3 years ago)
- Last Synced: 2024-10-14T14:48:30.336Z (over 1 year ago)
- Topics: customizable, editable-text, react
- Language: TypeScript
- Homepage: https://codesandbox.io/s/7w063kppz6
- Size: 1.36 MB
- Stars: 2
- Watchers: 2
- Forks: 4
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-editable-title [](https://travis-ci.org/CeamKrier/react-editable-title)
An editable title implementation for react.
## Installation
```
npm install react-editable-title
```
## Usage
```javascript
import React, { useState } from 'react'
import Editable from 'react-editable-title'
const App = () => {
const [text, setText] = useState('')
const handleTextUpdate = (current: string) => {
setText(current)
}
return (
)
}
```
[](https://codesandbox.io/s/7w063kppz6)
## API
| Attribute | Type | Description | Required |
|--------------------------|-----------------|--------------------------------------------------------------------|----------|
| `text` | `string` | Text to be displayed | **Yes** |
| `textStyle` | `CSSProperties` | Custom text styling | No |
| `cb` | `function` | Invoked when the text has been edited | **Yes** |
| `onEditCancel` | `function` | Invoked when the edit has been canceled | No |
| `onValidationFail` | `function` | Invoked when the text hasn't matched the regex | No |
| `editButton` | `boolean` | Sets the visibility of the edit button. **Default** is `false` | No |
| `editButtonStyle` | `CSSProperties` | Custom edit button styling | No |
| `editControlButtons` | `boolean` | Sets the visibility of the control buttons. **Default** is `false` | No |
| `saveButtonStyle` | `CSSProperties` | Custom save button styling | No |
| `cancelButtonStyle` | `CSSProperties` | Custom cancel button styling | No |
| `placeholder` | `string` | Placeholder text of the input element | No |
| `saveOnBlur` | `boolean` | Attempts to save text input on unfocus. **Default** is `true` | No |
| `seamlessInput` | `boolean` | Presents text-editor alike experience. **Default** is `false` | No |
| `inputStyle` | `CSSProperties` | Custom input styling | No |
| `isFocused` | `boolean` | Externally sets the state of input focus. **Default** is `false` | No |
| `inputPattern` | `string` | Regex pattern of desired input | No |
| `inputErrorMessage` | `string` | Info message about mismatch of input | No |
| `inputErrorMessageStyle` | `CSSProperties` | Custom error message styling | No |
| `inputMinLength` | `number` | Min length accepted as an input | No |
| `inputMaxLength` | `number` | Max length accepted as an input | No |
## Features
The component can be controlled by keyboard keys. Hit **Enter** to save or **Esc** to cancel your edit.
If there is **no** change in the text, neither **Enter** nor the **Edit** button would work.
You also can control the validity of inputs with the **regex** you would provide. If the regex won't match the user input
then your desired **error message** will be shown below of the input field.
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
Thanks :raised_hands:
## License
[GPL](https://choosealicense.com/licenses/gpl-3.0/)