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 👨🏿💻
Top comments (3)
I'm not sure initializing useRef with null will work. You may get a compilation error.
Object is possibly 'null'. TS2531
May have to do some kind of null check or something, but the theory is sound. Thanks for sharing.
Bless you. Took me a sec to figure out how to convert it to a class-based react component but bless you.
I did the same but it is not running the script and loading the elements into the DOM. I could see only is getting appended as a child