Tutorial on how to make a custom React renderer
Switch branches/tags
Nothing to show
Latest commit 1d99c04 Oct 15, 2017 @nitin42 nitin42 Update faq.md
Failed to load latest commit information.
__tests__ Init commit Sep 29, 2017
demo use src directory Sep 25, 2017
src added test renderer Sep 29, 2017
.babelrc Init commit Sep 25, 2017
.gitignore ignore docx file Sep 25, 2017
.travis.yml Init commit Sep 29, 2017
README.md Build passing ✅ Sep 29, 2017
faq.md Update faq.md Oct 15, 2017
package.json added test scripts Sep 29, 2017
part-four.md edited 3 Sep 25, 2017
part-one.md Some language fixes Oct 1, 2017
part-three.md final update Sep 24, 2017
part-two.md edited 2 Sep 25, 2017
yarn.lock React 16 Sep 29, 2017


Building a custom React renderer

Build Status

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 four parts -

  • Part 1 - Creating a React reconciler (current targeted version React 16.0.0-alpha.4).

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

  • Part 3 - Parsing the input component (call the render() method on our main document).

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



In part one, we will create a React reconciler for the current targeted version of React 16.0.0-alpha.4. 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 for createElement and will also architect the component API for our example.


In part three, we will build a function that will parse the input component and will return the output (rendered children and props).


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

What we will build?

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 available here.

We will use officegen 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

let doc = officegen('docx', { __someOptions__ });

Generating output stream

let output = fs.createWriteStream (__filePath__);



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

error - Fired when there are any errors

Running the project

git clone https://github.com/nitin42/Making-a-custom-React-renderer
cd Making-a-custom-React-renderer
yarn install
yarn example

After you run yarn example, a docx file will be generated in the demo 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 on twitter for more updates.