Writing JSX to build pixel perfect UI elements can be very time consuming and frustrating. I’m talking about the process of figuring out the exact padding, margin, flexbox, width, height etc to match the required design spec. As React engineers, our time is most well spent on what we can do uniquely - write state management logic, API calls, error handling, component architecture, animations and building complex components that require lots of user interactions.
\nThe aim of this blog post is to provide a methodology using which designers can build the simpler UI HTML elements using Webflow and React engineers can inject complex elements / React components into the generated HTML page. This works best for sites that have less user specific / user generated content - like several b2b sites.
\nNote: For those who do not know about Webflow, it’s a tool that let’s designers design the UI, and it emits fully functional HTML code.
\nAs an example, let’s consider a webpage where most of the body is generated using Webflow apart from the header and the footer - which are arbitrarily complex react components.
\nWe start by assuming that we have already generated the HTML, JS and CSS files using webflow. The HTML file contains the head and body tags as usual.
\nWe want to insert our React header component at the top of the body, so we add an empty <div> element with a unique id:
<head>...</head>\n\n<body>\n <div id=\"webflow-header\"></div>\n ... HTML generated by webflow\n</body>As we will see later, the header component will be rendered inside the div above. We will get the ref of the div using the id “webflow-header”
We then want to make place for the footer, which should go right before the closing body tag:
\n<head>...</head>\n\n<body>\n <div id=\"webflow-header\"></div>\n ... HTML generated by webflow\n <div id=\"webflow-footer\"></div>\n</body>We also want to create a div where the whole react app will load in. Think of this as an entrypoint for the react app. From here, it will render the header and footer component into the two divs created above. We will do this using the createPortal function provided by React (as we will see later):
<head>...</head>\n\n<body>\n <div id=\"webflow-header\"></div>\n ... HTML generated by webflow\n <div id=\"webflow-footer\"></div>\n <div id=\"react-root\"></div>\n</body>Just like in a normal react app, we need to add the <script> tag that will load the bundle and run the React app:
<script src = \"bundle.js\"></script >We want to load the react app in the div with the ID “react-root”. This will load the root component of your react app, which can then load the header and footer react component in their respective div tags. The react app can also be used for any other operation like analytics:
ReactDOM.render(( \n <Router />\n), document.getElementById(\"react-root\"));In order to inject the header and footer components into their divs, we need to first get a reference to them. We do so using the document.getElementById function in the root component of the react app
this.headerDiv = document.getElementById(\"webflow-header\");\nthis.footerDiv = document.getElementById(\"webflow-footer\");In pages where the divs have not been inserted, the value for this.headerDiv and this.footerDiv will be null. So we need to remember to do a null check before using them.
In order to inject the components, we have to call the createPortal function from inside the render function. This function takes two arguments:
this.headerDiv or this.footerDiv)render() { \n let result = [];\n if (this.headerDiv) { \n result.push(ReactDOM.createPortal(<Header />, this.headerDiv)); \n }\n\n if (this.footerDiv) { \n result.push(ReactDOM.createPortal(<Footer />, this.footerDiv)) \n } \n return result;\n}footerDiv and headerDiv are not falsy value - which will be the case when the div elements are not added into the webflow html page.ReactDOM.createPortal(<Header />, this.headerDiv)We have successfully added react components to a webflow generated HTML page.
\nSince the injection of the components happen after the react bundle is downloaded and run, the user first sees the HTML that’s generated using Webflow, and then sees a jitter as the react components are injected (which occupy their own height and width). Unfortunately, this jitter is quite noticeable.
\nWe can fix this by setting the body tag’s CSS to have display: none initially, and then after the components have been injected, we can set the display to block (in the componentDidMount or useEffect function). This way, the experience for the user is the same as if the whole page is made using React.
So in the componentDidMount / useEffect function, we should do the following
let body = document.getElementsByTagName(\"body\")[0];\nif (body !== null) { \n body.style.display = \"block\";\n}The above would prevent the jitter and provide a seamless experience for the user.
\nWe saw how we can inject components into an existing HTML page generated via Webflow using the ReactDOM.createPortal function.
This method allows for quicker development of relatively static web pages saving you money. As a reference, we at SuperTokens use this method. Our home page is made completely using Webflow, excepting for the header and footer - which are injected using the method shown above.
","frontmatter":{"date":"December 10, 2020","title":"Speed up your web development time by integrating Webflow into a React application","cover":"speed-up-your-web-development-time-by-integrating-webflow-into-a-react-application.png","author":"Rishabh Poddar","description":"Writing JSX to build pixel perfect UI elements can be very time consuming and frustrating. Learn how react engineers can inject complex elements / React components into a Webflow generated HTML page."},"fields":{"slug":"/speed-up-your-web-development-time-by-integrating-webflow-into-a-react-application/"}},"site":{"siteMetadata":{"title":"SuperTokens Blog"}}},"pageContext":{"id":"377f086c-1689-5f6e-a980-0eb314022772","fields__slug":"/speed-up-your-web-development-time-by-integrating-webflow-into-a-react-application/","__params":{"fields__slug":"speed-up-your-web-development-time-by-integrating-webflow-into-a-react-application"}}}, "staticQueryHashes": []}