Sometimes, We want to add the script tag to individual components. This post talks about adding scripts or inline scripts to individual components with multiple approaches
- Functional components with useHook
- React class components with componentWillMount
- React-helmet npm package
how to add a script tag to react components
This section describes adding a script tag to class and functional components.
React class components:
There is a callback method componentWillMount
which will be called for every render of a react component.
Inside call back,
- Created script tag using document createElement function which creates a script tag
- Change created script tag attributes
src
andasync
- Finally, add a script tag to the document. body or document. head
Example code:
componentWillMount() {
const scriptTag = document.createElement("script");
scriptTag.src = "https://use.typekit.net/hello.js";
scriptTag.async = true;
document.body.appendChild(scriptTag);
}
The same code can be replaced with functional components using the useEffect() hook.
useEffect
hooks call for every render of a react component,
if you pass an empty array to return inside the useEffect() hook, It will load and run only once.
import React from 'react';
import { useEffect } from 'react';
function InlineStyleComponent(props) {
useEffect(() => {
const scriptTag = document.createElement('script');
scriptTag.src = "https://use.typekit.net/foobar.js";
scriptTag.async = true;
document.body.appendChild(scriptTag);
return () => {
document.body.removeChild(scriptTag);
}
}, []);
return (
<div>
Adding inline styles to functional component
</div>
);
}
export default InlineStyleComponent;
react-helmet adding script tag inside the head tag
React helmet is an npm library that manages browser head manager, It is easy to change web page lines of code inside a head tag.
First, install react-helmet with the npm install command
npm install react-helmet
It adds dependency to package.json
"dependencies": {
"react-helmet": "^6.1.0",
}
Complete component code to add script tag to component using react-helment
.
import React, { Component } from 'react';
import { Helmet } from 'react-helmet';
class AddingScriptExample extends Component {
render() {
return (
<div className="application">
<Helmet>
<script src="https://use.typekit.net/hello.js" type="text/javascript" />
</Helmet>
...
</div>
);
}
}
export default AddingScriptExample;