How To Use External Javascript Library Into ReactJS Using react-script-tag Package

In this article, we will learn how to use an external javascript library into react JS using the react-script-tag package.

Using this library we can add <script> tag to our document. and inside of this tag attribute src, we can include our external javascript source.

Installation

npm install --save react-script-tag

ScriptTag

Import script tag top of the component when you have to add external javascript

import ScriptTag from 'react-script-tag';

Now, inside our App component, invoke the <ScriptTag> component. This is a JSX component that closes on itself and using the src attribute, parses the URL of our desired library. you can see the example below,

import React from 'react'
import ScriptTag from 'react-script-tag';

export default function addscript() {
    return (
        <div className='App'>
            <h1>How to use an external
                JavaScript library in ReactJS?</h1>
            <ScriptTag type="text/javascript"
                src=
                "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" />
        </div>
    )
}

You can see the output in below,