Nukem's Possible Manifestation

    svelte-particles

    1.22.0 • Public • Published

    banner

    svelte-particles

    npm npm downloads

    Official tsParticles SvelteJS component

    Installation

    npm install svelte-particles

    or

    yarn add svelte-particles

    Usage

    <script>
      import Particles from "svelte-particles";
    
      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 onParticlesInit = (main) => {
        // you can use main to customize the tsParticles instance adding presets or custom shapes
      };
    </script>
    
    <Particles
      id="tsparticles"
      options="{particlesConfig}"
      on:particlesLoaded="{onParticlesLoaded}"
      on:particlesInit="{onParticlesInit}"
    />
    
    <!-- or -->
    
    <Particles
      id="tsparticles"
      url="{particlesUrl}"
      on:particlesLoaded="{onParticlesLoaded}"
      on:particlesInit="{onParticlesInit}"
    />

    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";
    
      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 onParticlesInit = (main) => {
        // you can use main to customize the tsParticles instance adding presets or custom shapes
      };
    </script>
    
    <svelte:component
      this="{ParticlesComponent}"
      id="tsparticles"
      options="{particlesConfig}"
      on:particlesLoaded="{onParticlesLoaded}"
      on:particlesInit="{onParticlesInit}"
    />
    
    <!-- or -->
    
    <svelte:component
      this="{ParticlesComponent}"
      id="tsparticles"
      url="{particlesUrl}"
      on:particlesLoaded="{onParticlesLoaded}"
      on:particlesInit="{onParticlesInit}"
    />

    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

    336

    Version

    1.22.0

    License

    MIT

    Unpacked Size

    435 kB

    Total Files

    8

    Last publish

    Collaborators

    • ar3s