Package Exports

react-basic-contenteditable
react-basic-contenteditable/dist/main.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-basic-contenteditable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Basic Contenteditable

React Basic Content Editable

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-contenteditable

or yarn

yarn add react-basic-contenteditable

Usage

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 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.

Licence

React Basic Contenteditable is MIT licensed.