gatsby-script
TypeScript icon, indicating that this package has built-in type declarations

2.13.0 • Public • Published

gatsby-script

An enhanced script component for Gatsby sites with support for various loading strategies.

You do not need to install this package directly, it is available in the main Gatsby package since gatsby@4.15.0.

See the documentation for full details.

Usage

import * as React from "react"
import { Script, ScriptStrategy } from "gatsby" // Re-exported from core

const GTM = `G-XXXXXXXXXX` // Example Google Analytics 4 identifier

// Example script sources for illustration
const scripts = {
  three: "https://unpkg.com/three@0.139.1/build/three.js",
  marked: "https://cdn.jsdelivr.net/npm/marked/marked.min.js",
  gtag: `https://www.googletagmanager.com/gtag/js?id=${GTM}`,
}

// Strategy prop is optional, defaults to post-hydrate
function IndexPage() {
  return (
    <main>
      <h1>Script component example</h1>
      <Script src={scripts.three} strategy={ScriptStrategy.postHydrate} />
      <Script src={scripts.marked} strategy={ScriptStrategy.idle} />
      <Script
        src={scripts.gtag}
        strategy={ScriptStrategy.offMainThread}
        forward={[`gtag`]}
      />
      <Script id="gtag-config" strategy={ScriptStrategy.offMainThread}>
        {`
          // Example configuration of Google Analytics for use in Partytown
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments)};
          gtag('js', new Date());
          gtag('config', ${GTM}, { send_page_view: false })
        `}
      </Script>
      <Script
        id="my-unique-id"
        dangerouslySetInnerHTML={{ __html: `alert('Hello world')` }}
      />
      <Script id="my-unique-id-2">{`alert('Hello world')`}</Script>
    </main>
  )
}

export default IndexPage

Readme

Keywords

Package Sidebar

Install

npm i gatsby-script

Weekly Downloads

188,422

Version

2.13.0

License

MIT

Unpacked Size

51.8 kB

Total Files

12

Last publish

Collaborators

  • kathmbeck
  • pieh
  • tylerbarnes
  • fk
  • daniellewgatsby
  • kylemathews
  • dschau
  • wardpeet
  • lekoarts
  • smthomas
  • rachelbahl
  • j0sh77