License npm Bundle Size JSR CI
SolidJS hook to load external scripts -- built on top of
@dschz/load-script.
- π Fully typed with TypeScript
- βοΈ Built on top of
@dschz/load-scriptinheriting all the same features. - π Declarative async tracking via Solid's
createResource
npm install solid-js @dschz/load-script @dschz/solid-create-script pnpm install solid-js @dschz/load-script @dschz/solid-create-script yarn install solid-js @dschz/load-script @dschz/solid-create-script bun install solid-js @dschz/load-script @dschz/solid-create-script
These are peer dependencies, so you must install:
solid-js@dschz/load-script
Loads an external script dynamically and returns a Resource<HTMLScriptElement>.
| Name | Type | Description |
|---|---|---|
src |
string |
Script URL (required) |
options |
LoadScriptOptions |
loadScript options (e.g. async, type) |
container |
HTMLElement |
HTML element to append <script /> to (default: document.head) |
import { Switch, Match } from "solid-js"; import { createScript } from "@dschz/solid-create-script"; const CustomComponent = () => { const script = createScript("https://example.com/widget.js", { async: true }); return ( <Switch> <Match when={script.loading}>Loading Script...</Match> <Match when={script.error}>Failed to load</Match> <Match when={script()}>Script is ready!</Match> </Switch> ); };
- Scripts are cached by
srcunlessinnerHTMLortextContentis used - Scripts are not automatically removed on cleanup/unmount
- Designed to be simple and safe to use inside SolidJS components (in SSR and non-SSR environments)
Feel free to open issues or submit pull requests. PRs are welcome!