Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding script tag to React/JSX

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 (             <DocumentTitle title="People">                 <article className={[prefix('people'), prefix('people', 'index')].join(' ')}>                     <h1 className="tk-brandon-grotesque">People</h1>                                          <script src="https://use.typekit.net/foobar.js"></script>                     <script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script>                 </article>             </DocumentTitle>         );     } }; 

I have also tried:

<script src="https://use.typekit.net/foobar.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> 

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.

like image 879
ArrayKnight Avatar asked Dec 22 '15 21:12

ArrayKnight


People also ask

Can I add script tag in JSX?

Import 'ScriptTag' component: Import the built-in 'ScriptTag' component from the react-script-tag library at the top of the file where we want to add the script tag. Now call the <ScriptTag> component inside our App component. This is a self-closing JSX component.

How do I load a script tag in React?

Step 1: I installed React-Helmet using npm i react-helmet from the terminal while inside my react-app folder path. Step 2: I then added import {Helmet} from "react-helmet"; header in my code. Show activity on this post. To add script tag or code in head tag <head> , use react-helmet package.


1 Answers

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("script");      script.src = "https://use.typekit.net/foobar.js";     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(() => {   const script = document.createElement('script');    script.src = "https://use.typekit.net/foobar.js";   script.async = true;    document.body.appendChild(script);    return () => {     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 => {   useEffect(() => {     const script = document.createElement('script');      script.src = url;     script.async = true;      document.body.appendChild(script);      return () => {       document.body.removeChild(script);     }   }, [url]); };  export default useScript; 

Which can be used like so:

import useScript from 'hooks/useScript';  const MyComponent = props => {   useScript('https://use.typekit.net/foobar.js');    // rest of your component } 
like image 123
Alex McMillan Avatar answered Sep 27 '22 22:09

Alex McMillan