Adding script tag to React JSX

Question

I have a relatively straightforward issue of trying to add inline scripting to a React component  What I have so far   use strict    import        styles pages people scss    import React    Component   from  react   import DocumentTitle from  react-document-title    import   prefix   from        core util    export default class extends Component       render             return                lt DocumentTitle title  quot People quot  gt                   lt article className   prefix  people    prefix  people    index    join       gt                       lt h1 className  quot tk-brandon-grotesque quot  gt People lt  h1 gt                                            lt script src  quot https   use typekit net foobar js quot  gt  lt  script gt                       lt script dangerouslySetInnerHTML     html   try Typekit load   async  true     catch e       gt  lt  script gt                   lt  article gt               lt  DocumentTitle gt                       I have also tried   lt script src  quot https   use typekit net foobar js quot  gt  lt  script gt   lt script gt try Typekit load   async  true     catch e    lt  script gt   Neither approach seems to execute the desired script  I m guessing it s a simple thing I m missing  Can anybody help out  PS  Ignore the foobar  I have a real id actually in use that I didn t feel like sharing

User · Answer

You can find best answer at the following link:

https://cleverbeagle.com/blog/articles/tutorial-how-to-load-third-party-scripts-dynamically-in-javascript

const loadDynamicScript = (callback) => {
const existingScript = document.getElementById('scriptId');

if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'url'; // URL for the third-party library being loaded.
    script.id = 'libraryName'; // e.g., googleMaps or stripe
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

User · Answer

According to Alex McMillan s solution  I have the following adaptation   My own environment   React 16 8   next v9      add a custom component named Script    hooks Script js  import   useEffect   from  react   const useScript    url  async    gt      useEffect      gt        const script   document createElement  script        script src   url     script async    typeof async      undefined    true   async        document body appendChild script       return      gt          document body removeChild script              url      export default function Script   src  async true        useScript src  async     return null     Return null is necessary for the moment          Use the custom compoennt  just import it and substitute the old lower case  lt script gt  tag with the custom camel case  lt Script gt  tag would suffice      index js  import Script from     hooks Script     lt Fragment gt        Google Map        lt div ref  el   gt  this el   el  className  gmap  gt  lt  div gt         Old html script           lt script type  text javascript  src  http   maps google com maps api js  gt  lt  script gt            new custom Script component        lt Script src  http   maps google com maps api js  async  false    gt   lt  Fragment gt

User · Answer

for multiple scripts  use this  var loadScript   function src      var tag   document createElement  script      tag async   false    tag src   src    document getElementsByTagName  body   appendChild tag     loadScript    cdnjs com some library js   loadScript    cdnjs com some other library js

User · Answer

My favorite way is to use React Helmet     it s a component that allows for easy manipulation of the document head in a way you re probably already used to    e g   import React from  react   import  Helmet  from  react-helmet    class Application extends React Component     render          return            lt div className  application  gt               lt Helmet gt                   lt script src  https   use typekit net foobar js  gt  lt  script gt                   lt script gt try Typekit load   async  true     catch e    lt  script gt               lt  Helmet gt                           lt  div gt                  https   github com nfl react-helmet

User · Answer

This answer explains the why behind this behavior  Any approach to render the script tag doesn t work as expected   Using the script tag for external scripts Using dangerouslySetInnerHTML  Why React DOM  the renderer for react on web  uses createElement calls to render JSX into DOM elements  createElement uses the innerHTML DOM API to finally add these to the DOM  see code in React source   innerHTML does not execute script tag added as a security consideration  And this is the reason why in turn rendering script tags in React doesn t work as expected  For how to use script tags in React check some other answers on this page

User · Answer

If you need to have  lt script gt  block in SSR  server-side rendering   an approach with componentDidMount will not work   You can use react-safe library instead  The code in React will be   import Safe from  react-safe      in render   lt Safe script src  https   use typekit net foobar js  gt  lt  Safe script gt   lt Safe script gt      try Typekit load   async  true     catch e        lt  Safe script gt

User · Answer

The answer Alex Mcmillan provided helped me the most but didn t quite work for a more complex script tag    I slightly tweaked his answer to come up with a solution for a long tag with various functions that was additionally already setting  src      For my use case the script needed to live in head which is reflected here as well      componentWillMount            const script   document createElement  script           const scriptText   document createTextNode  complex script with functions i e  everything that would go inside the script tags           script appendChild scriptText         document head appendChild script

User · Answer

There is a very nice workaround using Range createContextualFragment          Like React s dangerouslySetInnerHTML  but also with JS evaluation     Usage        lt div ref  setDangerousHtml bind null  html    gt      function setDangerousHtml html  el        if el     null  return      const range   document createRange        range selectNodeContents el       range deleteContents        el appendChild range createContextualFragment html        This works for arbitrary HTML and also retains context information such as document currentScript

User · Answer

Edit  Things change fast and this is outdated - see update  Do you want to fetch and execute the script again and again  every time this component is rendered  or just once when this component is mounted into the DOM  Perhaps try something like this  componentDidMount          const script   document createElement  quot script quot         script src    quot https   use typekit net foobar js quot       script async   true       document body appendChild script      However  this is only really helpful if the script you want to load isn t available as a module package   First  I would always   Look for the package on npm Download and install the package in my project  npm install typekit  import the package where I need it  import Typekit from  typekit     This is likely how you installed the packages react and react-document-title from your example  and there is a Typekit package available on npm   Update  Now that we have hooks  a better approach might be to use useEffect like so  useEffect      gt      const script   document createElement  script       script src    quot https   use typekit net foobar js quot     script async   true     document body appendChild script      return      gt        document body removeChild script                Which makes it a great candidate for a custom hook  eg  hooks useScript js   import   useEffect   from  react    const useScript   url   gt      useEffect      gt        const script   document createElement  script         script src   url      script async   true       document body appendChild script        return      gt          document body removeChild script               url        export default useScript   Which can be used like so  import useScript from  hooks useScript    const MyComponent   props   gt      useScript  https   use typekit net foobar js          rest of your component

User · Answer

I created a React component for this specific case  https   github com coreyleelarson react-typekit  Just need to pass in your Typekit Kit ID as a prop and you re good to go   import React from  react   import Typekit from  react-typekit    const HtmlLayout        gt       lt html gt       lt body gt         lt h1 gt My Example React Component lt  h1 gt         lt Typekit kitId  abc123    gt       lt  body gt     lt  html gt      export default HtmlLayout

User · Answer

You can use npm postscribe to load script in react component  postscribe   mydiv     lt script src  https   use typekit net foobar js  gt  lt  script gt

User · Answer

A bit late to the party but I decided to create my own one after looking at  Alex Macmillan answers and that was by passing two extra parameters  the position in which to place the scripts such as  or  and setting up the async to true false  here it is   import   useEffect   from  react    const useScript    url  position  async    gt      useEffect      gt        const placement   document querySelector position       const script   document createElement  script         script src   url      script async   typeof async      undefined    true   async       placement appendChild script        return      gt          placement removeChild script                url        export default useScript    The way to call it is exactly the same as shown in the accepted answer of this post but with two extra again  parameters      First string is your URL    Second string can be head or body    Third parameter is true or false  useScript  string    string   bool

User · Answer

You can also use react helmet  import React from  react   import  Helmet  from  react-helmet    class Application extends React Component     render          return            lt div className  application  gt               lt Helmet gt                   lt meta charSet  utf-8    gt                   lt title gt My Title lt  title gt                   lt link rel  canonical  href  http   example com example    gt                   lt script src   path to resource js  type  text javascript    gt               lt  Helmet gt                           lt  div gt                  Helmet takes plain HTML tags and outputs plain HTML tags  It s dead simple  and React beginner friendly

User · Answer

Solution depends on scenario  Like in my case  I had to load a calendly embed inside a react component    Calendly looks for a div and reads from it s data-url attribute and loads an iframe inside the said div   It is all good when you first load the page  first  div with data-url is rendered  Then calendly script is added to body  Browser downloads and evaluates it and we all go home happy   Problem comes when you navigate away and then come back into the page  This time the script is still in body and browser doesn t re-download  amp  re-evaluate it   Fix    On componentWillUnmount find and remove the script element  Then on re mount  repeat the above steps  Enter   getScript  It is a nifty jquery helper that takes a script URI and a success callback  Once the script it loaded  it evaluates it and fires your success callback  All I have to do is in my componentDidMount   getScript url   My render method already has the calendly div  And it works smooth

User · Answer

To add script tag or code in head tag  lt head gt   use react-helmet package  it is light and have good documentation  To add Js code in script tag inside body      function htmlDecode html          return html replace   amp   a-z     ig   match  entity    gt            const entities     amp    amp    apos        gt    gt    lt    lt    nbsp    xa0   quot    quot              entity   entity toLowerCase            if  entities hasOwnProperty entity               return entities entity                     return match                    render         const scriptCode     lt script type  quot text javascript quot  gt              function               window hello               FIRST NAME   firstName               LAST NAME   lastName                                           lt  script gt       return         lt div dangerouslySetInnerHTML      html  this htmlDecode scriptCode       gt                this code can be tested by console log windows hello

User · Answer

Further to the answers above you can do this   import React from  react    export default class Test extends React Component     constructor props        super props          componentDidMount         const s   document createElement  script        s type    text javascript       s async   true      s innerHTML    document write  This is output by document write            this instance appendChild s          render         return  lt div ref  el   gt   this instance   el     gt           The div is bound to this and the script is injected into it   Demo can be found on codesandbox io

User · Answer

componentDidMount       const head   document querySelector  head      const script   document createElement  script      script setAttribute       src        https   assets calendly com assets external widget js         head appendChild script

User · Answer

I tried to edit the accepted answer by  Alex McMillan but it won t let me so heres a separate answer where your able to get the value of the library your loading in  A very important distinction that people asked for and I needed for my implementation with stripe js  useScript js import   useState  useEffect   from  react   export const useScript    url  name    gt       const  lib  setLib    useState        useEffect      gt        const script   document createElement  script        script src   url     script async   true     script onload        gt  setLib    name   window name          document body appendChild script       return      gt          document body removeChild script              url      return lib     usage looks like const PaymentCard    props    gt      const   Stripe     useScript  https   js stripe com v2     Stripe      NOTE  Saving the library inside an object because often times the library is a function and React will execute the function when storing in state to check for changes -- which will break libs  like Stripe  that expect to be called with specific args -- so we store that in an object to hide that from React and protect library functions from being called

[javascript] Adding script tag to React/JSX

Examples related to javascript

Examples related to reactjs

Examples related to ecmascript-6