An enhanced script component for Gatsby sites with support for various loading strategies
npm install gatsby-scriptAn 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.
``tsx
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 (
Script component example
strategy={ScriptStrategy.offMainThread}
forward={[gtag]}alert('Hello world')
/>
dangerouslySetInnerHTML={{ __html: }}
/>
)
}
export default IndexPage
``