Package Exports

inferno-particles

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (inferno-particles) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

inferno-particles

Official tsParticles Inferno component

Installation

npm install inferno-particles

yarn add inferno-particles

How to use

Code

Example:

import Particles from "inferno-particles";

class App extends Component {
  render() {
    return (
      <Particles
        id="tsparticles"
        params={{
          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,
                speed: 3,
              },
              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.
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

Find your parameters configuration here.

Errors

If you have typescript errors tsParticles uses TypeScript 3.9.6 so try installing at least 3.8 for import type syntax.

Demos

The demo website is here

https://particles.matteobruni.it

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

https://codepen.io/collection/DPOage