{"id":21863,"library":"react-script-hook","title":"react-script-hook","description":"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.","status":"active","version":"1.7.2","language":"javascript","source_language":"en","source_url":"https://github.com/hupe1980/react-script-hook","tags":["javascript","react","hook","script","loader","typescript"],"install":[{"cmd":"npm install react-script-hook","lang":"bash","label":"npm"},{"cmd":"yarn add react-script-hook","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-script-hook","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; hooks require React 16.8.6+","package":"react","optional":false},{"reason":"Peer dependency; required for DOM-related operations","package":"react-dom","optional":false}],"imports":[{"note":"Default export of the hook. Preferred and simplest usage.","symbol":"default","correct":"import useScript from 'react-script-hook'"},{"note":"Named export also available but default is more common. Using require() works but is not recommended in ESM environments.","wrong":"const useScript = require('react-script-hook')","symbol":"named","correct":"import { useScript } from 'react-script-hook'"},{"note":"TypeScript users can import the options type for better DX. This is a pure type import, no runtime effect.","symbol":"type-imports","correct":"import type { UseScriptOptions } from 'react-script-hook'"}],"quickstart":{"code":"import React from 'react';\nimport { StripeProvider } from 'react-stripe-elements';\nimport useScript from 'react-script-hook';\nimport MyCheckout from './my-checkout';\n\nfunction App() {\n const [loading, error] = useScript({ src: 'https://js.stripe.com/v3/' });\n\n if (loading) return Loading Stripe API...
;\n if (error) return Failed to load Stripe API: {error.message}
;\n\n return (\n \n \n \n );\n}\n\nexport default App;","lang":"javascript","description":"Demonstrates loading the Stripe.js script dynamically using useScript and conditionally rendering a StripeProvider only after the script loads."},"warnings":[{"fix":"If you need to remove the script on unmount, consider manually managing the script element or use a custom cleanup effect.","message":"Scripts are appended to at the end. The hook does not remove the script tag if the component unmounts or src changes to null.","severity":"gotcha","affected_versions":"all"},{"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.","message":"Setting src to null after it was previously set does not remove the script. The script remains in the DOM.","severity":"gotcha","affected_versions":"all"},{"fix":"Always destructure as an array: const [loading, error] = useScript(...);","message":"In 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.","severity":"deprecated","affected_versions":">=1.0.0 <2.0.0"},{"fix":"Use the checkForExisting option to avoid adding scripts in SSR, or guard with useEffect only on the client.","message":"The hook relies on document.createElement and document.body.appendChild, so it will not work in server-side rendering (SSR) without a check.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Ensure correct import: import useScript from 'react-script-hook' (default) or import { useScript } from 'react-script-hook' (named).","cause":"Incorrect import: using default import when the module was imported as a named export or vice versa.","error":"useScript is not a function"},{"fix":"Pass an object with a src string: useScript({ src: 'https://example.com/script.js' })","cause":"Calling useScript without an object argument or with a missing src property.","error":"Cannot read properties of undefined (reading 'src')"},{"fix":"Only call useScript in client-side code. Use dynamic import or useEffect to conditionally load the hook on the client.","cause":"The hook runs during SSR where document.body is null.","error":"TypeError: Cannot read property 'appendChild' of null"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}