@tsparticles/preact

Official tsParticles Preact component

Installation

npm install @tsparticles/preact

or

yarn add @tsparticles/preact

How to use

Code

Examples:

Remote url

import Particles, { initParticlesEngine } from "@tsparticles/preact";
import { loadFull } from "tsparticles";

class App extends Component {
  state = {
    particlesInitialized: false,
  };

  constructor(props) {
    super(props);

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

    initParticlesEngine(async engine => {
      // you can initialize the tsParticles instance (main) here, adding custom shapes or presets
      // 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);
    }).then(() => {
      this.setState({
        particlesInitialized: true,
      });
    });
  }

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

  render() {
    if (!this.state.particlesInitialized) {
      return null;
    }

    return <Particles id="tsparticles" url="http://foo.bar/particles.json" particlesLoaded={this.particlesLoaded} />;
  }
}

Options object

import Particles, { initParticlesEngine } from "@tsparticles/preact";
import { loadFull } from "tsparticles";

class App extends Component {
  state = {
    particlesInitialized: false,
  };

  constructor(props) {
    super(props);

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

    initParticlesEngine(async engine => {
      // you can initialize the tsParticles instance (main) here, adding custom shapes or presets
      // 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);
    }).then(() => {
      this.setState({
        particlesInitialized: true,
      });
    });
  }

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

  render() {
    if (!this.state.particlesInitialized) {
      return null;
    }

    return (
      <Particles
        id="tsparticles"
        particlesLoaded={this.particlesLoaded}
        options={{
          background: {
            color: {
              value: "#0d47a1",
            },
          },
          fpsLimit: 120,
          interactivity: {
            events: {
              onClick: {
                enable: true,
                mode: "push",
              },
              onHover: {
                enable: true,
                mode: "repulse",
              },
              resize: true,
            },
            modes: {
              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,
            },
            move: {
              direction: "none",
              enable: true,
              outModes: {
                default: "bounce",
              },
              random: false,
              speed: 6,
              straight: false,
            },
            number: {
              density: {
                enable: true,
                area: 800,
              },
              value: 80,
            },
            opacity: {
              value: 0.5,
            },
            shape: {
              type: "circle",
            },
            size: {
              value: { min: 1, max: 5 },
            },
          },
          detectRetina: true,
        }}
      />
    );
  }
}

Props

| Prop | Type | Definition | | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | id | string | The id of the element. | | 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 | | particlesLoaded | function | This function is called when particles are correctly loaded in canvas, the current container is the parameter and you can customize it here | | theme | string | The theme name to apply. Requires @tsparticles/plugin-themes to be installed and loaded via initParticlesEngine |

Note: The theme prop requires the optional @tsparticles/plugin-themes package. Without it, the loadTheme() method is not available on the container and the prop is silently ignored.

Reactive behavior

The component automatically reloads particles when id, options, or url props change. Changes to the theme prop apply the theme via loadTheme without a full reload.

Cleanup

On component unmount, the particles container is automatically destroyed, stopping all animations and freeing resources.

Find your parameters configuration here.

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