@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.

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

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

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

Demo

TODO

Changelog

See CHANGELOG.md