# gatsby-script

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

Latest version **2.16.0** (published 2026-01-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install gatsby-script
pnpm add gatsby-script
yarn add gatsby-script
bun add gatsby-script
```

## Health

**Score 70/100 (B)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; popular repo; extremely popular.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.16.0 |
| Published | 2026-01-26 |
| First published | 2022-04-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18.0.0 <26 |
| Dependencies | 0 |
| Unpacked size | 51.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 55944 |
| Author | Ty Hopp |
| Maintainers | pieh, kathmbeck, serhalp-netlify, mlgualtieri-gatsby, fk, tylerbarnes, daniellewgatsby |
| Keywords | gatsby |

## Links

- npm: https://www.npmjs.com/package/gatsby-script
- Repository: https://github.com/gatsbyjs/gatsby
- Homepage: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-script#readme
- Issues: https://github.com/gatsbyjs/gatsby/issues
- npm.io page: https://npm.io/package/gatsby-script

## Recent versions

- 2.16.0 (latest) — 2026-01-26
- 2.17.0-next.0 (next) — 2025-11-27
- 2.17.0-react19.0 (react19) — 2025-11-24
- 1.10.0 (latest-v4) — 2022-12-07
- 2.0.0-alpha-drupal-proxyurl.14 (drupal-proxyurl) — 2022-11-22
- 2.0.0-alpha-transformer-json.20740 (alpha-transformer-json) — 2022-10-12
- 2.0.0-alpha-v5.d20221012t101120.57 (alpha-v5) — 2022-10-12
- 1.8.0-alpha-a5-peer.53 (alpha-a5-peer) — 2022-09-14
- 1.8.0-alpha-preview-gh-api.26 (preview-gh-api) — 2022-09-08
- 1.8.0-alpha-9689ff.25 (alpha-9689ff) — 2022-08-31
- 1.3.0-alpha-drupal-self-reference.18 (drupal-self-reference) — 2022-07-19
- 1.1.0-alpha-wp-image-cdn-auth.20253 (wp-image-cdn-auth) — 2022-05-20
- 1.0.0-alpha-gatsby-script.20251 (alpha-gatsby-script) — 2022-05-19
- 1.0.0-alpha-gatsby-script-proxy-2.20252 (alpha-gatsby-script-proxy-2) — 2022-05-18
- 2.15.0 — 2025-08-27
- … 94 more at https://npm.io/package/gatsby-script/versions

## README

# 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](https://gatsby.dev/gatsby-script) for full details.

## Usage

```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 (
    <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
```

---
_Source: https://npm.io/package/gatsby-script · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._