Registry / http-networking / react-script-hook

react-script-hook

library1.7.2jsnpmunverified

A React hook for dynamically loading external scripts and tracking their load state. Current stable version is 1.7.2. The package is actively maintained with regular updates. It provides a simple API: call useScript with a script URL and get loading/error states. Key differentiators: automatic deduplication (multiple components loading the same script share a single request), support for onload callbacks, a checkForExisting flag for environments where the script may already be present, and conditionally loading by setting src to null. Includes TypeScript definitions and supports React 16.8.6 through 18.

http-networking

npm install react-script-hook

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-SCRIPT-HOOK

react-script-hook

http-networkingjavascriptv1.7.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import useScript from 'react-script-hook'

Default export of the hook. Preferred and simplest usage.

named

✓ import { useScript } from 'react-script-hook'

✗ const useScript = require('react-script-hook')

Named export also available but default is more common. Using require() works but is not recommended in ESM environments.

type-imports

✓ import type { UseScriptOptions } from 'react-script-hook'

TypeScript users can import the options type for better DX. This is a pure type import, no runtime effect.

Demonstrates loading the Stripe.js script dynamically using useScript and conditionally rendering a StripeProvider only after the script loads.

import React from 'react'; import { StripeProvider } from 'react-stripe-elements'; import useScript from 'react-script-hook'; import MyCheckout from './my-checkout'; function App() { const [loading, error] = useScript({ src: 'https://js.stripe.com/v3/' }); if (loading) return <h3>Loading Stripe API...</h3>; if (error) return <h3>Failed to load Stripe API: {error.message}</h3>; return ( <StripeProvider apiKey={process.env.STRIPE_PUBLIC_KEY ?? ''}> <MyCheckout /> </StripeProvider> ); } export default App;

Debug

Known issues

gotchaScripts are appended to <body> at the end. The hook does not remove the script tag if the component unmounts or src changes to null.

fix

If you need to remove the script on unmount, consider manually managing the script element or use a custom cleanup effect.

affects: all

gotchaSetting src to null after it was previously set does not remove the script. The script remains in the DOM.

fix

Only set src to null conditionally if you intend to skip loading initially. Do not toggle src to null to remove a previously loaded script.

affects: all

deprecatedIn version 1.7.0 and earlier, the hook returned loading, error as a tuple. This remains the same in current versions, but some users mistakenly destructure them as a single object.

fix

Always destructure as an array: const [loading, error] = useScript(...);

affects: >=1.0.0 <2.0.0

gotchaThe hook relies on document.createElement and document.body.appendChild, so it will not work in server-side rendering (SSR) without a check.

fix

Use the checkForExisting option to avoid adding scripts in SSR, or guard with useEffect only on the client.

affects: all

Errors

Common errors & fixes

useScript is not a function

Incorrect import: using default import when the module was imported as a named export or vice versa.

fix

Ensure correct import: import useScript from 'react-script-hook' (default) or import { useScript } from 'react-script-hook' (named).

Cannot read properties of undefined (reading 'src')

Calling useScript without an object argument or with a missing src property.

fix

Pass an object with a src string: useScript({ src: 'https://example.com/script.js' })

TypeError: Cannot read property 'appendChild' of null

The hook runs during SSR where document.body is null.

fix

Only call useScript in client-side code. Use dynamic import or useEffect to conditionally load the hook on the client.

Upgrade

Version history

1.7.2latest on npm

Audit

Dependencies

reactrequiredPeer dependency; hooks require React 16.8.6+

react-domrequiredPeer dependency; required for DOM-related operations

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/hupe1980/react-script-hook ↗

packagehttps://www.npmjs.com/package/react-script-hook ↗