Sometimes, We want to add the script tag to individual components. This post talks about adding script or inline scripts to individual components multiple approaches
- Functional components with useHook
- React class components with componentWillMount
- React-helmet npm package
how to add script tag to react components
This section describes adding script tag to class and functional components.
React class components
There is a call back method componentWillMount
which will be called for every render of an react component. Inside call back,
- Created script tag using document createElement function which creates script tag
- Change created script tag attributes
src
andasync
- Finally add script tag to 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 useEffect() hook. useEffect
hookes calls for every render of an react component,
if you pass an empty array to return inside 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 head tag
React helmet is an npm library which manages browser head manager, It is very easy to change web page lines of code inside a head tag.
First install react-helment with 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;
Wrap