Extending React Component using Monkey Patching

Do you want to extend or change some libraries locally according to your project? We can do this using monkey patching.

Monkey patching is the way to extend or change the default behavior of the code without changing the primary source code.

For example, we'll take CKEditor's react component and will extend it to make it more usable.

Installation

npm install --save ckeditor4-react

CKEditor4-react component uses standard presets out of the box. To make it use any other presets or custom package, we can extend the component.

Extending the React CKEditor component to use full Package.

To change the CKEditor create a new component extending the CKEditor and override editorUrl.

import CKEditor from "ckeditor4-react"

class CkEditorFull extends CKEditor {
  constructor(props) {
    super(props)
    //CKEditor4 distribution URL
    CKEditor.editorUrl = "https://cdn.ckeditor.com/4.11.4/full-all/ckeditor.js"
  }
}

export default CkEditorFull

import CKEditorFull from "./CkEditorFull"
;<CKEditorFull data="Hello World!" />

Happy Coding !!!

Rupinder Kaur