How to easily add particles, confetti or fireworks effects to a Solid.js application

Solid.js Particles (solid-particles)

Official tsParticles Solid.js component

I just want code sample

Here the working sample, without any additional text, if someone wants just to see it working and experiment with the code

Now let's see how to achieve this

Installation

npm install solid-particles solid-js

or

yarn add solid-particles solid-js

How to use

Code

Examples:

Remote url

import Particles from "solid-particles";

function App() {
  return (
    <div class="App">
      <Particles
        id="tsparticles"
        options={{
          background: {
            color: "#000",
          },
          fullScreen: {
            enable: true,
          },
        }}
      />
    </div>
  );
}

Options object

import Particles from "solid-particles";

class App extends Component {
  constructor(props) {
    super(props);

    this.particlesInit = this.particlesInit.bind(this);
    this.particlesLoaded = this.particlesLoaded.bind(this);
  }

  particlesInit(main) {
    console.log(main);

    // you can initialize the tsParticles instance (main) here, adding custom shapes or presets
  }

  particlesLoaded(container) {
    console.log(container);
  }

  render() {
    return (
      <Particles
        id="tsparticles"
        init={this.particlesInit}
        loaded={this.particlesLoaded}
        options={{
          background: {
            color: {
              value: "#0d47a1",
            },
          },
          fpsLimit: 60,
          interactivity: {
            detectsOn: "canvas",
            events: {
              onClick: {
                enable: true,
                mode: "push",
              },
              onHover: {
                enable: true,
                mode: "repulse",
              },
              resize: true,
            },
            modes: {
              bubble: {
                distance: 400,
                duration: 2,
                opacity: 0.8,
                size: 40,
              },
              push: {
                quantity: 4,
              },
              repulse: {
                distance: 200,
                duration: 0.4,
              },
            },
          },
          particles: {
            color: {
              value: "#ffffff",
            },
            links: {
              color: "#ffffff",
              distance: 150,
              enable: true,
              opacity: 0.5,
              width: 1,
            },
            collisions: {
              enable: true,
            },
            move: {
              direction: "none",
              enable: true,
              outMode: "bounce",
              random: false,
              speed: 6,
              straight: false,
            },
            number: {
              density: {
                enable: true,
                value_area: 800,
              },
              value: 80,
            },
            opacity: {
              value: 0.5,
            },
            shape: {
              type: "circle",
            },
            size: {
              random: true,
              value: 5,
            },
          },
          detectRetina: true,
        }}
      />
    );
  }
}

Props

Prop	Type	Definition
width	string	The width of the canvas.
height	string	The height of the canvas.
options	object	The options of the particles instance.
url	string	The remote options url, called using an AJAX request
style	object	The style of the canvas element.
className	string	The class name of the canvas wrapper.
canvasClassName	string	the class name of the canvas.
container	object	The instance of the particles container
init	function	This function is called after the tsParticles instance initialization, the instance is the parameter and you can load custom presets or shapes here
loaded	function	This function is called when particles are correctly loaded in canvas, the current container is the parameter and you can customize it here

Find your parameters configuration here.

Demos

You can see the official sample created using CodeSandbox here

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