GitHub - nitin42/Making-a-custom-React-renderer: Tutorial on how to make a custo...
source link: https://github.com/nitin42/Making-a-custom-React-renderer
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Building a custom React renderer
Let's make a custom React renderer
Introduction
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 (using
react-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.
Brief
Part-I
In part one, we will create a React reconciler using the react-reconciler
package. We will implement the renderer using Fiber as it has a first-class renderer API for creating custom renderer.
Part-II
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.
Part-III
In part three, 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__); doc.generate(output);
Events
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.
Contributing
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK