@solid-primitives/script-loader


Creates a primitive to load scripts dynamically, either for external services or jsonp requests

Installation

``
npm install @solid-primitives/script-loader


or

yarn add @solid-primitives/script-loader

or

pnpm add @solid-primitives/script-loader
`

How to use it

createScriptLoader expects a props object with a src property. All the other props will be spread to the script element.

The src prop is required and will be used to set the src or textContent attribute. It can be a string or an accessor.

`ts
import { createScriptLoader } from "@solid-primitives/script-loader";

// For example, to use recaptcha:
createScriptLoader({
src: "https://www.google.com/recaptcha/enterprise.js?render=my_token",
async onLoad() {
await grecaptcha.enterprise.ready();
const token = await grecaptcha.enterprise.execute("my_token", { action: "login" });
// do your stuff...
},
});

// or pinterest embeds:
createScriptLoader({
src: '!function(a,b,c){var d,e,f;d="PIN_"+~~((new Date).getTime()/864e5),...',
onLoad() {
window?.PinUtils?.build();
},
});
`

Definition

`ts
function createScriptLoader(props: ScriptProps): HTMLScriptElement | undefined; // script element with be undefined only on the server

type ScriptProps = Omit, "src" | "textContent"> & {
/* URL or source of the script to load. /
src: string | Accessor;
};
``

Demo

TODO

Changelog

See CHANGELOG.md