Can React Helmet inject a javascript object into tag?

Question

I've a question, I need to inject into the HEAD tag a javascript object, for tag management purposes. This is my Helmet component, but it accepts only specific parameters to set to metadata serverside through rewind() function.

Is there a way still to use React Helmet to do what I need, so, create javascritpt objects into a SCRIPT tag or should I follow a different approach?

MyComponent.js

<Helmet
    title={article.get('title')}
    meta={[
        {"property": "og:title", "content": article.get('title')},
        {"property": "og:url", "content": article.get('url')},

        {"property": "twitter:title", "content": article.get('title')}
    ]}
/>

server.js

let htmlHead = `
  ${head.title}
  ${head.meta.toString()}
`;

Thank you for the support

score 23 · Answer 1 · answered Jun 24 '20 at 18:57

23

Th existing answers are outdated. You don't need to contort the code with script attributes or innerHTML. You can use the <script> tag as usual in HTML:

<Helmet>
  <script src="https://some.host/api.js" type="text/javascript" />
</Helmet>

answered Jun 24 '20 at 18:57

Dan Dascalescu

143,271
52
317
404

davnicwil · Answer 2 · 2020-06-24T21:07:22.163

Update

This answer from 2017 applies for v3 of react-helmet, and is now a little outdated - there's now a better way to do this, using a script tag directly, as referenced in a newer answer, which I'd recommend doing instead.

Will keep this answer up for posterity, and for people on older versions of Helmet. But just a note that though it's the top voted answer, it's no longer the best answer.

I need to inject into the HEAD tag a javascript object

You could define the object in an inline script, using the innerHTML attribute on Helmet's script prop - this attribute was introduced in Helmet 3.0.0

<Helmet 
  script={[{ 
    type: 'text/javascript', 
    innerHTML: 'window.yourObject = { it: "works" }' 
  }]} 
/>

if you have a json object you can use like . ` ` – nick Apr 03 '23 at 23:27 — nick, Apr 03 '23 at 23:27

score 12 · Answer 3 · answered Aug 28 '16 at 08:40

If I understood your question correctly, in your <Helmet/> declaration, you can add in a script property to inject a <script> tag into the HTML head of your pages.

<Helmet
    title={article.get('title')}
    meta={[
        {"property": "og:title", "content": article.get('title')},
        {"property": "og:url", "content": article.get('url')},

        {"property": "twitter:title", "content": article.get('title')}
    ]}
    script={[
            {"src": "http://url.com/script.js", "type": "text/javascript"}
    ]}
/>

score 3 · Answer 4 · answered Oct 31 '22 at 19:00

3

Just add a script tag in following way:

<Helmet>
    <script type="text/javascript">
        {`console.log("Hello World");window.secret = "Tss..."`}
    </script>
</Helmet>

answered Oct 31 '22 at 19:00

zemil

3,235
2
24
33

Can React Helmet inject a javascript object into tag?

4 Answers4