Question

139

add raw HTML with < script> inside Gatsby React page

rated 0 times [ 146] [ 7] / answers: 1 / hits: 29018 / 6 Years ago, sat, february 24, 2018, 12:00:00

I am trying to add an external embed code to my Gatsby page.

I currently use

import React from 'react'

import Link from 'gatsby-link'





let test =<script type='text/javascript'>

(function(d, s) {

    var useSSL = 'https:' == document.location.protocol;

    var js, where = d.getElementsByTagName(s)[0],

    js = d.createElement(s);

    js.src = (useSSL ? 'https:' : 'http:') +  '//www.peopleperhour.com/hire/1002307300/1213788.js?width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt(Math.random()*10000, 10);

    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } }

}(document, 'script'));

</script>



const ContactPage = () => (



    <div>

        <h1>ContactPage</h1>

        <div

            dangerouslySetInnerHTML={{ __html: test }}

          />

    </div>



)



export default ContactPage

which is full of syntax errors. Can you please point out a better way to include raw snippets in a react component?

Is there alternatively a place in Gatsby to add all additional scripts like custom scripts, Google Analytics, icon fonts, animate.js and anything else I may need?

Thank you for the help

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kamronr

Add To Favorites

Follow

Total Points: 749

Total Questions: 110

Total Answers: 122

Location: Dominica

Member since Sat, Nov 5, 2022

2 Years ago

kamronr questions

1 How to enforce semicolon in Typescript interface

Mon, Dec 21, 20, 00:00, 3 Years ago

1 Jest - How do I reset object state for each test?

Fri, Oct 16, 20, 00:00, 4 Years ago

1 Change (Add/Remove) CSS Class On Mobile With JS or jQuery

Sat, Oct 3, 20, 00:00, 4 Years ago

1 Don't allow horizontal scroll when scrolling vertically (and vice versa)

Tue, Oct 1, 19, 00:00, 5 Years ago

1 How to extract text from PDF?

Sun, Jul 28, 19, 00:00, 5 Years ago

View All

answered 6 Years ago kevonmoisesf · Accepted Answer

You can inject external scripts (with no npm modules) to gatsby.js project in many ways. Prefer to use respective gatsby-plugin for web-analytics scripts.

Using require() :

Create a file in your project myScript.js and paste the script content

Add const myExtScript = require('../pathToMyScript/myScript')

to a statefull component at the Pages folder inside render() and before return() if you want to execute that script only at that page(=page/component scope).

export default class Contact extends React.Component {  

  render() {  

   const myExtScript = require('../pathToMyScript/myScript')  

    return (

      ........       

               )}

If you want to execute script in the global scope (=in every page/ component):

add it in html.js
```
<script dangerouslySetInnerHTML= {{ __html: ` 

    putYourSciptHereInBackticks `}} />`  
```
before closing the </body>. It is better to manipulate/monitor your global scope at this component because it has this specific purpose... to inject html to every page/route globally.

Another way to inject at the global scope is with require() before the component declaration. This will work but it's not a good practice, as your components shouldn't inject anything globally.

 const myExtScript = require('../pathToMyScript/myScript')  



   export default class Contact extends React.Component {  

    render() {  

      return (

      ........       

               )}

P.S. Sorry if the answer is not edited properly. This my first answer at StackOverflow.