https://github.com/dsnchz/solid-create-script

Solid hook to dynamically load an external script
https://github.com/dsnchz/solid-create-script

load-script script script-loader solidjs

Last synced: 2 months ago
JSON representation

Solid hook to dynamically load an external script

• Host: GitHub
• URL: https://github.com/dsnchz/solid-create-script
• Owner: dsnchz
• License: mit
• Created: 2024-11-22T03:21:42.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-06-05T16:51:05.000Z (7 months ago)
• Last Synced: 2025-08-11T15:36:54.554Z (5 months ago)
• Topics: load-script, script, script-loader, solidjs
• Language: TypeScript
• Homepage:
• Size: 319 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

          


  



# @dschz/solid-create-script

[![License](https://img.shields.io/badge/license-MIT-green)](LICENSE)

[![npm](https://img.shields.io/npm/v/@dschz/solid-create-script)](https://www.npmjs.com/package/@dschz/solid-create-script)

[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@dschz/solid-create-script)](https://bundlephobia.com/package/@dschz/solid-create-script)

[![JSR](https://jsr.io/badges/@dschz/solid-create-script/score)](https://jsr.io/@dschz/solid-create-script)

[![CI](https://github.com/dsnchz/solid-create-script/actions/workflows/ci.yaml/badge.svg)](https://github.com/dsnchz/solid-create-script/actions/workflows/ci.yaml)

> SolidJS hook to load external scripts -- built on top of [`@dschz/load-script`](https://www.npmjs.com/package/@dschz/load-script).

## ✅ Features

- 📑 Fully typed with TypeScript

- ✏️ Built on top of [`@dschz/load-script`](https://www.npmjs.com/package/@dschz/load-script) inheriting all the same features.

- 📆 Declarative async tracking via Solid's `createResource`

## 📦 Installation

```bash

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`

## 🧠 API

### `createScript(src, options?, container?)`

Loads an external script dynamically and returns a `Resource`.

#### Parameters:

| Name        | Type                | Description                                                       |

| ----------- | ------------------- | ----------------------------------------------------------------- |

| `src`       | `string`            | Script URL (required)                                             |

| `options`   | `LoadScriptOptions` | `loadScript` options (e.g. `async`, `type`)                       |

| `container` | `HTMLElement`       | HTML element to append `` to (default: `document.head`) |

## 🧪 Example

```ts

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 (

    

      Loading Script...

      Failed to load

      Script is ready!

    

  );

};

```

## 📝 Notes

- Scripts are cached by `src` unless `innerHTML` or `textContent` is 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)

## 💬 Feedback & Contributions

Feel free to open [issues](https://github.com/dsnchz/solid-create-script/issues) or submit pull requests. PRs are welcome!