This package has been deprecated

Author message:

@tsparticles/svelte is the newest package compatible with v3, please use that instead

svelte-particles
TypeScript icon, indicating that this package has built-in type declarations

2.12.0 • Public • Published

banner

svelte-particles

npm npm downloads GitHub Sponsors

Official tsParticles SvelteJS component

Slack Discord Telegram

tsParticles Product Hunt

Installation

npm install svelte-particles

or

yarn add svelte-particles

Usage

<script>
    import Particles from "svelte-particles";
    //import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
    import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.

    let particlesUrl = "http://foo.bar/particles.json"; // placeholder, replace it with a real url

    let particlesConfig = {
        particles: {
            color: {
                value: "#000",
            },
            links: {
                enable: true,
                color: "#000",
            },
            move: {
                enable: true,
            },
            number: {
                value: 100,
            },
        },
    };

    let onParticlesLoaded = event => {
        const particlesContainer = event.detail.particles;

        // you can use particlesContainer to call all the Container class
        // (from the core library) methods like play, pause, refresh, start, stop
    };

    let particlesInit = async engine => {
        // you can use main to customize the tsParticles instance adding presets or custom shapes
        // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
        // starting from v2 you can add only the features you need reducing the bundle size
        //await loadFull(engine);
        await loadSlim(engine);
    };
</script>

<Particles
    id="tsparticles"
    class="foo bar"
    style=""
    options="{particlesConfig}"
    on:particlesLoaded="{onParticlesLoaded}"
    particlesInit="{particlesInit}"
/>

<!-- or -->

<Particles
    id="tsparticles"
    class="foo bar"
    style=""
    url="{particlesUrl}"
    on:particlesLoaded="{onParticlesLoaded}"
    particlesInit="{particlesInit}"
/>

SSR

The particles component isn't built for SSR, so you have to force the component to be called client side with async import.

You can see a sample below:

<script>
    import { onMount } from "svelte";
    //import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
    import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.

    let ParticlesComponent;

    onMount(async () => {
        const module = await import("svelte-particles");

        ParticlesComponent = module.default;
    });

    let particlesUrl = "http://foo.bar/particles.json"; // placeholder, replace it with a real url

    let particlesConfig = {
        particles: {
            color: {
                value: "#000",
            },
            links: {
                enable: true,
                color: "#000",
            },
            move: {
                enable: true,
            },
            number: {
                value: 100,
            },
        },
    };

    let onParticlesLoaded = event => {
        const particlesContainer = event.detail.particles;

        // you can use particlesContainer to call all the Container class
        // (from the core library) methods like play, pause, refresh, start, stop
    };

    let particlesInit = async engine => {
        // you can use main to customize the tsParticles instance adding presets or custom shapes
        // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
        // starting from v2 you can add only the features you need reducing the bundle size
        //await loadFull(main);
        await loadSlim(engine);
    };
</script>

<svelte:component
    this="{ParticlesComponent}"
    id="tsparticles"
    class="foo bar"
    style=""
    options="{particlesConfig}"
    on:particlesLoaded="{onParticlesLoaded}"
    particlesInit="{particlesInit}"
/>

<!-- or -->

<svelte:component
    this="{ParticlesComponent}"
    id="tsparticles"
    class="foo bar"
    style=""
    url="{particlesUrl}"
    on:particlesLoaded="{onParticlesLoaded}"
    particlesInit="{particlesInit}"
/>

TypeScript errors

A user reported me a TypeScript error (#3963), and that's because this Svelte component is built using TypeScript.

If someone is experiencing the same error, please follow these steps:

After that, everything should work as expected.

SvelteKit

If you have issues with SvelteKit, like you Cannot use import statement outside a module, change your vite.config.ts file like this:

import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";

export default defineConfig({
    plugins: [sveltekit()],
    ssr: {
        noExternal: ["tsparticles", "tsparticles-slim", "tsparticles-engine", "svelte-particles"], // add all tsparticles libraries here, they're not made for SSR, they're client only
    },
});

Demos

The demo website is here

https://particles.js.org

There's also a CodePen collection actively maintained and updated here

https://codepen.io/collection/DPOage

Package Sidebar

Install

npm i svelte-particles

Weekly Downloads

237

Version

2.12.0

License

MIT

Unpacked Size

162 kB

Total Files

9

Last publish

Collaborators

  • ar3s
  • matteobruni