Adding a React component to your Squarespace website
What if you could combine the easy setup and design tools of a website building platform (like Squarespace) with a powerful JavaScript library (like React) that is used for creating complex user interfaces?
We were recently looking to add some life to the footer section of our website. Some ideas were floated around and we eventually settled on displaying a sentence “Complete your next project with us.” where “project” would randomly change to a different word from a list of words at a given interval.
Sounds pretty easy to do with a custom code block and some JS but we wanted to challenge ourselves a little bit. This would also allow for cooler and more complex solutions to be added to the website in the future if needed,
A few challenges
Ignoring the glaring SEO problem with our solution, we have two major challenges:
The website content should still be easily editable. Therefore, the word list can’t be baked into the code.
The load speed of the page shouldn’t be impacted. Adding external JS libraries like this usually means loading a heavy file with the page.
Some solutions
In order for this to work, we need a way to use the html code block from Squarespace in order to define the React component that should run and where it should be.
This will allow using the standard editor to drag and drop our component around. Essentially as if you were building your own custom Squarespace block.
How React takes control of an html tag
If you look at a standard React project, you will notice that the main static html file (index.html) has something that looks like this:
A “div” element with the “id” attribute set to “app” and a “script” element pointing to a script at a specific location.
In your “main.js” or “main.tsx” file there is some code that searches the page for an element with the id “app” and renders a component inside it. It looks like this:
These two concepts are key to our solution. They allow you to load a script located at “src”. The script in question will look for an html element with the id attribute set to “app”. You can change “app” to any other unique id on your page. The contents of the relevant element will get replaced by your React component.
Custom data attributes
To allow easy editing of the word list, we should be able to type in the options straight from the editor.
It’s possible to define custom data attributes in html and since we are dealing with a list of words, we can separate them using commas. Something like this:
This should allow for “‘your,comma,separated,word,list‘.split(‘,’)” in JS to turn the string into an array that we can run logic on.
You’ll notice that we also added a prefix and suffix property in order to be able to construct the whole sentence inside the React component.
This is what the JS code would look like to read those attributes and pass them to your component before rendering:
JS Compilation with webpack
In order to generate a single optimized bundle that our script element can reference, we need a bundler like webpack.
Depending on how you set it up, it will take all of your component code and generate the bundle file that you can later reference (details below on how to set this up).
Page load speed
For our page load speed, the solution is extremely simple, we can set the “defer” attribute. This will ensure that the page is loaded and parsed first before loading and parsing our external code.
This allows us to tell the browser to prioritize loading the page structure and content first before our custom component.
The “async” attribute is a possible alternative if you would prefer to load the custom code in parallel with everything else. This can reduce the perceived loading time as the browser will try to render everything sooner but can potentially delay the loading of other items on the page if things don’t happen in the right order (source).
Other websites and website building tools
As long as you are dealing with the web and you have access to some sort of place where you can provide your own custom html, this solution should work with your setup as well.
Implementation
Step 1: Make a Squarespace website
Squarespace is pretty painless to set up. Create an account, pick a template and begin.
Step 2: Make a React component and compile it
There are some pretty good guides on how to set up a React project from scratch. Here is one that walks you through a vanilla setup which includes webpack. If you would like to add Typescript, here’s another guide you can follow.
The point here is to have a setup where you are able to compile your project into a nice little JS bundle. This bundle is what you are able to host somewhere and provide a link to using the “src” attribute on the “script” element.
Adding styled-components to your project makes having a single JS bundle easier by compiling all of your CSS into your JS as well. It also generates some dynamic class names so you can avoid styling conflicts with your page.
Step 3: Host the compiled component
We used an S3 bucket on AWS but you could put your component anywhere that is publicly accessible from which you can get some sort of url.
Ensure that an “https” url is available as having parts of your website loaded with insecure “http” will result in “mixed content” warnings and will reduce the security of the entire page.
Step 4: Add your React component to your website
Add a custom code block onto your page:
Define the script element with the “defer” attribute and “src” set to where your bundle is hosted. Your code would look something like this:
From this editor in Squarespace, it’s relatively easy to modify your custom data attributes and pass data to your component.
Don’t forget to put the proper “id” that you used when compiling your component, otherwise your element will remain blank.
That’s it!
We are now able to combine some complex dynamic web components into our simple low-code Squarespace website. Someone who wants to extend the world list or modify the sentence only needs minimal html knowledge in order to modify the code block and can stay within the Squarespace editor.
This is probably overkill for small components like the one we just showcased. The purpose here was more for the challenge and simply trying something new.
I would see this as more useful if you need user interaction that requires state, a custom integration, or access to a pre-existing React component from npm.
How we can help
Whether it’s with your website or a complex dynamic web application, TECHI Solutions can help you.
Don’t be a stranger. Get in touch with us so that we can help you.
