Repository files navigation

Let's make a custom React renderer 😎

This is a small tutorial on how to build your custom React renderer and render the components to the host environment you need. The tutorial is divided into three parts -

• Part 1 - Creating a React reconciler (usingreact-reconciler package).

• Part 2 - Creating a public interface to the reconciler i.e "Renderer".

• Part 3 - Creating a render method to flush everything to the host environment we need.

In part one, we will create a React reconciler using thereact-reconciler package. We will implement the renderer using Fiber as it has a first-class renderer API for creating custom renderer.

In part two, we will create a public interface to the reconciler i.e a renderer. We will create a custom method forcreateElement and will also architect the component API for our example.

In part three, we will create a render method which will render our input component.

We will create a custom renderer that will render a React component to a word document. I've already made one. Full source code and the documentation for that is availablehere.

We will useofficegen for this. I'll explain some of it's basic concepts here.

Officegen can generate Open Office XML files for Microsoft Office 2007 and later. It generates a output stream and not a file.It is independent of any output tool.

Creating a document object

letdoc=officegen('docx',{ __someOptions__});

Generating output stream

letoutput=fs.createWriteStream(__filePath__);doc.generate(output);

Events

finalize - It is fired after a stream has been generated successfully.

error - Fired when there are any errors

git clone https://github.com/nitin42/Making-a-custom-React-renderercd Making-a-custom-React-rendereryarn installyarn example

After you runyarn example, a docx file will be generated in thedemo folder.

Suggestions to improve the tutorial are welcome 😃.

If you've completed the tutorial successfully, you can either watch/star this repo or follow me ontwitter for more updates.