1.0.6 • Published 5 months ago
react-basic-contenteditable v1.0.6
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
npm install --save react-basic-contenteditableor yarn
yarn add react-basic-contenteditableUsage
Live demo at https://chrisuser.github.io/react-basic-contenteditable/
Example
import ContentEditable from "react-basic-contenteditable"
const App = () => {
const [content, setContent] = useState("")
return (
<div>
<div>{content}</div>
<ContentEditable
placeholder="Type here"
containerClassName="container-class"
contentEditableClassName="contenteditable-class"
placeholderClassName="placeholder-class"
onChange={(content) => setContent(content)}
/>
</div>
)
}
export default AppProps
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.
Licence
React Basic Contenteditable is MIT licensed.