1.0.6 • Published 4 months ago

react-basic-contenteditable v1.0.6

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

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!

NameOptionalTypeDescription
containerClassName✔️stringCustom classes for the wrapper div
contentEditableClassName✔️stringCustom classes for the input element
placeholderClassName✔️stringCustom classes for the placeholder text
charsCounterClassName✔️stringCustom classes for the character counter text (if maxLength is specified)
placeholder✔️stringInput placeholder text
disabled✔️booleanFlag that disables the input element
maxLength✔️numberIndicates the maximum number of characters a user can enter
autoFocus✔️booleanFlag to automatically focus the input element on mount
updatedContent✔️stringText injected from parent element into the input as the current value
onContentExternalUpdate✔️(content) => voidMethod that emits the injected content by the updatedContent prop
onChange✔️(content) => voidMethod that emits the current content as a string
onKeyUp✔️(e) => voidMethod that emits the keyUp keyboard event
onKeyDown✔️(e) => voidMethod that emits the keyDown keyboard event
onFocus✔️(e) => voidMethod that emits the focus event
onBlur✔️(e) => voidMethod 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.

1.0.6

4 months ago

1.0.5

5 months ago

1.0.4

5 months ago

1.0.3

6 months ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago