Noisy Pneumatic Mnemonic

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

    2.8.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";
    
        let particlesUrl = "http://foo.bar/particles.json";
    
        let particlesConfig = {
            particles: {
                color: {
                    value: "#000",
                },
                links: {
                    enable: true,
                    color: "#000",
                },
                move: {
                    enable: true,
                },
            },
        };
    
        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);
        };
    </script>
    
    <Particles
        id="tsparticles"
        options="{particlesConfig}"
        on:particlesLoaded="{onParticlesLoaded}"
        particlesInit="{particlesInit}"
    />
    
    <!-- or -->
    
    <Particles
        id="tsparticles"
        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";
    
        let ParticlesComponent;
    
        onMount(async () => {
            const module = await import("svelte-particles");
    
            ParticlesComponent = module.default;
        });
    
        let particlesUrl = "http://foo.bar/particles.json";
    
        let particlesConfig = {
            particles: {
                color: {
                    value: "#000",
                },
                links: {
                    enable: true,
                    color: "#000",
                },
                move: {
                    enable: true,
                },
            },
        };
    
        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 main => {
            // 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);
        };
    </script>
    
    <svelte:component
        this="{ParticlesComponent}"
        id="tsparticles"
        options="{particlesConfig}"
        on:particlesLoaded="{onParticlesLoaded}"
        particlesInit="{particlesInit}"
    />
    
    <!-- or -->
    
    <svelte:component
        this="{ParticlesComponent}"
        id="tsparticles"
        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.

    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

    Install

    npm i svelte-particles

    DownloadsWeekly Downloads

    576

    Version

    2.8.0

    License

    MIT

    Unpacked Size

    165 kB

    Total Files

    9

    Last publish

    Collaborators

    • ar3s
    • matteobruni