About time I gave something back to open source.
Yes, I created and published my first NPM package and it’s awesome 😊
Check it out: https://www.npmjs.com/package/editorjs-react-renderer
Why now? What let to this, you ask? Well, I’ll tell you.
I recently worked on a project that required rich text editing in browsers. As always, I wanted something different, so popular WYSIWYG editor choices like TinyMCE and Quill where out of the question. I was looking for something a little bit out of the box but still powerful and flexible…and I found it
As the authors describe it, Editor.js is a next generation block styled editor. One big or rather huge difference, among others, between Editor.js and traditional WYSIWYG editors is that instead of providing a single “content editable” element for your HTML markup/editing, Editor.js provides separate blocks for handling different components like paragraphs, headings, images, lists, quotes, etc. Each of these blocks output clean JSON data, which just takes flexibility through the roof. Without going into too much detail, Editor.js makes tasks (like properly scaling images on mobile devices) that were not quite fun to do with the spaghetti HTML markup output from WYSIWYG editor a lot easier. I might write up a post about all these in future, but if you are interested in knowing more, check out their official page or Patreon page for a clearer overview.
Editor.js leaves rendering to the developers. You get clean JSON data and you decide how to render and style your components with that data.
In the course of the project I had to create DRY and flexible renderers that receive JSON data and output styled and responsive React components for each block.
Well if I already have these renderers, why should anyone have to create them again right?
EditorJS React Renderer is a tiny library build from a collection of some of my renderers. I intend to include more renderers in the coming weeks. If you are a React developer this might come in handy sometime
And of course, I’m open to any questions if you need help 😊