Adding Inline Javascript to a React App

Adding Inline Javascript to a React App

by | 2 min read
Published:
Updated:

Let me start this with a disclaimer, I am not a React expert and I am sure there are probably other ways to do this. If you know of a better way then please let me know in the comments!

I have recently added Giscus to my blog which is a great way to add comments to a static developer blog.

I use Gatsby.js on my website which is built on React. The problem I had was working out how to add the Giscus script to my website.

This is what the Giscus script looks like.

<script src="https://giscus.app/client.js"
        data-repo="[ENTER REPO HERE]"
        data-repo-id="[ENTER REPO ID HERE]"
        data-category="[ENTER CATEGORY NAME HERE]"
        data-category-id="[ENTER CATEGORY ID HERE]"
        data-mapping="pathname"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="light"
        data-lang="en"
        crossorigin="anonymous"
        async>
</script>

The script will load the comments wherever you place the script so it can’t be added to the header of your HTML file.

As you know with react it can’t just be added to your JSX as it is as it won’t compile. So I needed to change it to a React component that I could just import where I needed.

🚀 Are you looking to level up your engineering career?

You might like my free weekly newsletter, The Curious Engineer, where I give career advice and tackle complex engineering topics.

📨 Don't miss out on this week's issue

This is what I came up with for the Giscus component which works well for me:

import React, { Component } from 'react'


class Giscus extends Component {
	componentDidMount() {
		const script = document.createElement('script')
		script.src = 'https://giscus.app/client.js'
		script.dataset.repo = '[ENTER REPO HERE]'
		script.dataset.repoId = '[ENTER REPO ID HERE]'
		script.dataset.category = '[ENTER CATEGORY NAME HERE]'
		script.dataset.categoryId = '[ENTER CATEGORY ID HERE]'
		script.dataset.mapping = 'pathname'
		script.dataset.reactionsEnabled = '1'
		script.dataset.emitMetadata = '0'
		script.dataset.theme = 'light'
		script.dataset.lang = 'en'
		script.crossorigin = 'anonymous'
		script.async = true
		this.div.appendChild(script)
	}

	render() {
		return <div ref={(el) => (this.div = el)}></div>
	}
}

export default Giscus

This approach should work for any other scripts that load components where the script is added to the HTML.

For general external javascript libraries, I would just add them to the HTML or use something like Helmet to add them where needed.


🙏 Was this helpful? If you want to say thanks, I love coffee ☕️ , any support is appreciated.


ALSO ON ALEXHYETT.COM

Idempotency - What it is and How to Implement it

Idempotency - What it is and How to Implement it

  • 22 September 2023
When designing an API it is easy to think about the happy path of our applications but if you want to build a robust application and keep…
5 Design Patterns That Are ACTUALLY Used By Developers

5 Design Patterns That Are ACTUALLY Used By Developers

  • 08 September 2023
High-level programming languages have been around since the 1950s and since then programmers worldwide have been using code to solve all…
Domain-Driven Design: Simple Explanation

Domain-Driven Design: Simple Explanation

  • 28 April 2023
When you are trying to build complex software it is important that everyone is on the same page. Even though most of us prefer to work alone…
Monolithic vs Microservice Architecture - Which Should You Use?

Monolithic vs Microservice Architecture - Which Should You Use?

  • 17 March 2023
If you are starting to build a new application or you are working on an existing one you may be wondering whether you should be building a…
Hexagonal Architecture: What Is It and Why Do You Need It?

Hexagonal Architecture: What Is It and Why Do You Need It?

  • 17 February 2023
We all do our best to try and write clean code that is going to be easy to maintain in the future. As time goes on and the application gets…
Snake Case vs Camel Case vs Pascal Case vs Kebab Case

Snake Case vs Camel Case vs Pascal Case vs Kebab Case

  • 06 February 2023
Coming up with names for things when writing software is hard. You need to come up with a few words that neatly describe everything you have…
What is CRUD? CRUD Operations in APIs

What is CRUD? CRUD Operations in APIs

  • 01 February 2023
90% of software that you use every day are what we call CRUD applications. Most of the time we are using them without even realising it…
Why Developers Should Embrace No-Code Solutions

Why Developers Should Embrace No-Code Solutions

  • 09 January 2023
The best line of code is the one you didn’t have to write. As developers, we love writing code. At the end of the day, it is what we are…