Dynamically Appending a script tag in a React App

#react #express #html

These days most libraries have a special/custom React component you can simply insert into your jsx code, then add some props and it works. What if you face a situation where you really need to use a library but they do not have any React specific support?

I was attempting to use the Paypal Checkout API to allow my client to make online payment. This API allows me as a developer to move all payment responsibilities to Paypal via their checkout widget. See docs for more details.

However, there is no strict React support. What they provide in the documentation is a script tag that you can drop somewhere in your html and the buttons would appear. My app in this case was a React application and my template is jsx instead of html. How would I handle a case like this?

I am writing this article to mirror that case with a simple example and show you one way you can handle it.

First of all lets simulate the situation with Paypal. Paypal provides us with a script tag such as this: <script src="https://www.paypal.com/sdk/js?client-id=sb"></script>. if you copy the url, it will take you to a blank page with a lot of text. This text is the javascript code. What we need is a server to send us some javascript code.

The fastest way I know to do this is with node js and Express js. Lets start by creating a folder for our application and initiating a package.json. This can all be done in our terminal.

# create a new directory
mkdir script-link

# navigate to the new directory
cd script-link

# initiate a package.json
npm init -y

Next lets install Express js, then create a file index.js to write our server code in. Again, all can be done via the terminal.

# install express js
npm i -S express

# create a index.js file
touch index.js

Now that we have our file open, lets start our server at port 3001. If you are unfamiliar with how this is done. check out the Express js documentation. Otherwise, I will try to comment the code as much as possible.

to start our application, all we need to do is run node index.js. Now lets go to our browser and navigate to http://localhost:3001/. This is what we should see on the screen:

We are almost there! Now we need to send some javascript code instead. This is the time to think about what we want our mini widget to do. To make it simple all it will do is create a button that will show an alert anytime it is clicked. This is what the code looks like:

and this is what you should see if you add this as a script tag to an html file:

Now that we have that, lets make our server send the code if a request is made. We do this by specifying the type of response file we are sending and by sending our javascript code in the form of a string.

Once we restart our server, and refresh the browser page, this is what we should see:

OK! we are now sending javascript code just like the Paypal API does. Lets now start a React application that can use this little widget.

First lets start a React application via the terminal.

npx create-react-app some-react-app

Once the app is setup we can run it by typing npm start in our terminal. This will show us the default React page we are all familiar with. Next lets change the code in the App.js file and add our own. All I did was add a h1 tag with some text.

In order to use the code that is in our server, we need to have a script tag. One method we can use is putting the script tag in our index.html that is in our public folder. However, lets say the javascript code has some function that we want to invoke at a particular point, how would we do that? For maximum control the best choice is to somehow add the code in a React component.

Since the script tag is just an html tag we can simply append it to a tag in our template/jsx.

First lets create a div tag that we can use as a ref to append to. We do this because this is jsx not html, so we can't simply select the div the way you would normally do. We have to create an instance of it via React ref.

Finally we use the useEffect hook to make sure we run the code when all components have been rendered. inside our useEffect hook we create a script tag, give it a src attribute with our express server link, and append the script tag to our div instance. This is what it looks like:

This is what our app should look like now:

Nice! We have successfully dynamically appended a script tag in our React application. Now, if we wanted, we could take this code and put it into a separate component. This will allow us to re-use it anywhere in our app.

This is a simple demo but can give you an idea of how some of those great and convenient custom React components, that many libraries provide, are created. In addition, the idea of appending a script tag is new to me and I wanted to document and share it.

Please leave a comment if you have any take on this!

Ok! Now back to learning 👨🏿‍💻