🌜
🌞
preact-particles

preact-particles

v1.42.0

Official tsParticles Preact Component - Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for Web Components, React, Vue.js (2.x and 3.x), Angular, Svelte, j

npm install preact-particles

README

banner

preact-particles

npm npm

Official tsParticles Preact component

Slack Discord Telegram

tsParticles Product Hunt preact particle

Installation

npm install preact-particles

or

yarn add preact-particles

How to use

Code

Examples:

Remote url

import Particles from "preact-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"
        url="http://foo.bar/particles.json"
        init={this.particlesInit}
        loaded={this.particlesLoaded}
      />
    );
  }
}

Options object

import Particles from "preact-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: 120,
          interactivity: {
            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,
                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

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

General

License
MIT
Typescript Types
Built-in
Tree-shakeable
No

Popularity

GitHub Stargazers
4,157
Community Interest
2,895
Number of Forks
486

Maintenance

Commits
11/2110/220750
Last Commit
Open Issues
16
Closed Issues
314
Open Pull Requests
8
Closed Pull Requests
314

Versions

Versions Released
11/2110/22015
Latest Version Released
Mar 8, 2022
Current Tags
latest1.42.0
beta2.0.0-beta.5
next2.0.2
alpha2.0.0-alpha.7

Contributors

matteobruni
matteobruni
Commits: 2,835
VincentGarreau
VincentGarreau
Commits: 624
Wufe
Wufe
Commits: 198
roslaneshellanoo
roslaneshellanoo
Commits: 72
renovate-bot
renovate-bot
Commits: 59
progers
progers
Commits: 57
PieceMaker
PieceMaker
Commits: 52
code-factor
code-factor
Commits: 26
TylerBurnett
TylerBurnett
Commits: 19
Himanshunitrr
Himanshunitrr
Commits: 15
SidiBecker
SidiBecker
Commits: 13
matteoums
matteoums
Commits: 10
Enhmunh-E
Enhmunh-E
Commits: 9
gabrielbarker
gabrielbarker
Commits: 7
gaurang7goel
gaurang7goel
Commits: 6