Mastodon hachyterm.io

Basic Particle.js Setup for React

You can create stunning backgrounds with Particles.js. Luckily, a kind soul has implemented this library as a React component: …

Last modified:

You can create stunning backgrounds with Particles.js. Luckily, a kind soul has implemented this library as a React component: react-particles-js.

react-particles-js is easy to use but it can be tricky to get the CSS working properly.

First, add the library to your installation:

npm install react-particles-js || yarn add react-particles-js

Then add this code to your app:

import Particles from "react-particles-js";

const particlesOptions = {
  particles: {
    number: {
      value: 80,
      density: {
        enable: true,
        value_area: 800
      }
    }
  }
};

class App extends Component {
  render() {
    return <Particles className="particles" params={particlesOptions} />;
  }
}

Now you need to style the Particles component in your CSS file.

body {
  margin: 0;
  padding: 0;
  /* more styles */
}

.particles {
  position: fixed;
  right: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

Note the z-index value: by setting it to -1 we set the particles CSS class as the lowest layer on the HTML canvas.

Credits