Free Consultation

Extending React Component using Monkey Patching

Extending the React components using monkey patching technique. It is a great way to extend or change libraries locally.

Posted by Rupinder Kaur on 20 Sep 2019

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

Now wherever you want to use your custom CKEditor, just import your custom component.
import CKEditorFull from "./CkEditorFull"
;<CKEditorFull data="Hello World!" />

Happy Coding !!!

Rupinder Kaur


We support the Open Source community.



VueJS Logo
Bulma Logo

Have a Project in mind?