https://github.com/chrisuser/react-basic-contenteditable
React 18 contenteditable component. Super-customizable!
https://github.com/chrisuser/react-basic-contenteditable
chat chatbot contenteditable react
Last synced: 10 months ago
JSON representation
React 18 contenteditable component. Super-customizable!
- Host: GitHub
- URL: https://github.com/chrisuser/react-basic-contenteditable
- Owner: ChrisUser
- License: mit
- Created: 2024-02-10T22:08:01.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-27T18:31:42.000Z (over 1 year ago)
- Last Synced: 2024-12-27T19:25:37.245Z (over 1 year ago)
- Topics: chat, chatbot, contenteditable, react
- Language: TypeScript
- Homepage: https://chrisuser.github.io/react-basic-contenteditable/
- Size: 244 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Basic Contenteditable
A 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.
## Installation
Install via npm
```sh
npm install --save react-basic-contenteditable
```
or yarn
```sh
yarn add react-basic-contenteditable
```
## Usage
Live **demo** at [https://chrisuser.github.io/react-basic-contenteditable/](https://chrisuser.github.io/react-basic-contenteditable/)
### Example
```javascript
import ContentEditable from "react-basic-contenteditable"
const App = () => {
const [content, setContent] = useState("")
return (
{content}
setContent(content)}
/>
)
}
export default App
```
### Props
> All props are optional, that's how you can **fully customize** it!
| Name | Optional | Type | Description |
| ------------------------ | -------- | ------------------- | --------------------------------------------------------------------------- |
| containerClassName | ✔️ | `string` | Custom classes for the wrapper div |
| contentEditableClassName | ✔️ | `string` | Custom classes for the input element |
| placeholderClassName | ✔️ | `string` | Custom classes for the placeholder text |
| charsCounterClassName | ✔️ | `string` | Custom classes for the character counter text (if `maxLength` is specified) |
| placeholder | ✔️ | `string` | Input placeholder text |
| disabled | ✔️ | `boolean` | Flag that disables the input element |
| maxLength | ✔️ | `number` | Indicates the maximum number of characters a user can enter |
| autoFocus | ✔️ | `boolean` | Flag to automatically focus the input element on mount |
| updatedContent | ✔️ | `string` | Text injected from parent element into the input as the current value |
| onContentExternalUpdate | ✔️ | `(content) => void` | Method that emits the injected content by the `updatedContent` prop |
| onChange | ✔️ | `(content) => void` | Method that emits the current content as a string |
| onKeyUp | ✔️ | `(e) => void` | Method that emits the keyUp keyboard event |
| onKeyDown | ✔️ | `(e) => void` | Method that emits the keyDown keyboard event |
| onFocus | ✔️ | `(e) => void` | Method that emits the focus event |
| onBlur | ✔️ | `(e) => void` | Method that emits the blur event |
### Keyboard shortcuts
- Undo: `Ctrl + Z`
- Redo: `Ctrl + Y` / `Ctrl + Shift + Z`
## Contribution
If 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.\
Remeber to follow the [Contributing Guidelines](https://github.com/ChrisUser/.github/blob/main/CONTRIBUTING.md).
## Licence
React Basic Contenteditable is [MIT licensed](https://github.com/ChrisUser/react-basic-contenteditable/blob/master/LICENSE).