@tsparticles/confetti
Version:
tsParticles confetti bundle — easily create confetti, confetti cannon, confetti explosions, confetti falling, and confetti parade animations with presets. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact,
97 lines (96 loc) • 3.41 kB
JavaScript
import { isString, tsParticles } from "@tsparticles/engine/lazy";
import { setConfetti } from "./utils.js";
let initPromise = null;
async function doInitPlugins(engine) {
engine.checkVersion("4.2.1");
await engine.pluginManager.register(async (e) => {
const [{ loadBasic }, { loadEmittersPluginSimple }, { loadMotionPlugin }, { loadCardSuitsShape }, { loadEmojiShape }, { loadHeartShape }, { loadImageShape }, { loadPolygonShape }, { loadSquareShape }, { loadStarShape }, { loadRotateUpdater }, { loadLifeUpdater }, { loadRollUpdater }, { loadTiltUpdater }, { loadWobbleUpdater },] = await Promise.all([
import("@tsparticles/basic/lazy"),
import("@tsparticles/plugin-emitters/plugin/lazy"),
import("@tsparticles/plugin-motion/lazy"),
import("@tsparticles/shape-cards/suits/lazy"),
import("@tsparticles/shape-emoji/lazy"),
import("@tsparticles/shape-heart/lazy"),
import("@tsparticles/shape-image/lazy"),
import("@tsparticles/shape-polygon/lazy"),
import("@tsparticles/shape-square/lazy"),
import("@tsparticles/shape-star/lazy"),
import("@tsparticles/updater-rotate/lazy"),
import("@tsparticles/updater-life/lazy"),
import("@tsparticles/updater-roll/lazy"),
import("@tsparticles/updater-tilt/lazy"),
import("@tsparticles/updater-wobble/lazy"),
]);
await Promise.all([
loadBasic(e),
loadMotionPlugin(e),
loadEmittersPluginSimple(e),
loadCardSuitsShape(e),
loadHeartShape(e),
loadImageShape(e),
loadPolygonShape(e),
loadSquareShape(e),
loadStarShape(e),
loadEmojiShape(e),
loadRotateUpdater(e),
loadLifeUpdater(e),
loadRollUpdater(e),
loadTiltUpdater(e),
loadWobbleUpdater(e),
]);
});
}
async function initPlugins(engine) {
if (initPromise) {
return initPromise;
}
initPromise = doInitPlugins(engine);
return initPromise;
}
export async function confetti(idOrOptions, confettiOptions) {
await initPlugins(tsParticles);
let options, id;
if (isString(idOrOptions)) {
id = idOrOptions;
options = confettiOptions ?? {};
}
else {
id = "confetti";
options = idOrOptions;
}
return setConfetti(tsParticles, {
id,
options,
});
}
confetti.create = async (canvas, options = {}) => {
await initPlugins(tsParticles);
const id = canvas?.getAttribute("id") ?? "confetti";
canvas?.setAttribute("id", id);
await setConfetti(tsParticles, {
id,
canvas: canvas ?? undefined,
options,
});
return async (idOrOptions, confettiOptions) => {
let subOptions, subId;
if (isString(idOrOptions)) {
subId = idOrOptions;
subOptions = confettiOptions ?? options;
}
else {
subId = id;
subOptions = idOrOptions;
}
return setConfetti(tsParticles, {
id: subId,
canvas: canvas ?? undefined,
options: subOptions,
});
};
};
confetti.init = async () => {
await initPlugins(tsParticles);
};
confetti.version = "4.2.1";
globalThis.confetti = confetti;