{"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,"search_vec":"'1.7.2':22 '16.8.6':90 '18':92 'activ':26 'alreadi':73 'api':35 'automat':48 'call':36 'callback':63 'checkforexist':65 'compon':51 'condit':77 'current':18 'dedupl':49 'definit':86 'differenti':47 'dynam':9 'environ':68 'extern':11 'flag':66 'get':43 'hook':4,7,95 'includ':84 'javascript':93 'key':46 'load':10,16,52,78 'loader':97 'loading/error':44 'maintain':27 'may':72 'multipl':50 'null':83 'onload':62 'packag':24 'present':75 'provid':32 'react':2,6,89,94 'react-script-hook':1 'regular':29 'request':59 'script':3,12,40,55,71,96 'set':80 'share':56 'simpl':34 'singl':58 'src':81 'stabl':19 'state':17,45 'support':60,88 'track':14 'typescript':85,98 'updat':30 'url':41 'usescript':37 'version':20","created_at":"2026-04-27T17:02:08.832220+00:00","updated_at":"2026-04-27T17:02:08.832220+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/hupe1980/react-script-hook","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/react-script-hook","openapi_spec":null,"status_page":null,"smithery":null,"categories":["http-networking"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-18","next_check":"2026-07-26","install_tag":null}}