tsParticles Blossom Preset V1

Sample

This is my presset for tsparticles

You can find more details at tsparticles's document and its github repository

How to use it

React.js / Preact / Inferno

The syntax for React.js, Preact and Inferno is the same.

This sample uses the class component syntax, but you can use hooks as well (if the library supports it).

import Particles from "react-tsparticles";
import { Main } from "tsparticles";
import { loadBlossomFallingVer1 } from "tsparticles-preset-blossom-ver1";

export class ParticlesContainer extends React.PureComponent<IProps> {
  // this customizes the component tsParticles installation
  customInit(main: Main) {
    // this adds the preset to tsParticles, you can safely use the
    loadFirePreset(main);
  }

  render() {
    const options = {
      preset: "blossomFallVer1",
    };

    return <Particles options={options} init={this.customInit} />;
  }
}

If you preffer using function :

import Particles from "react-tsparticles";
import { loadBlossomFallingV1 } from "tsparticles-preset-blossom-ver1";
import { Main } from "tsparticles";
function particlesInit(Main) {
  loadBlossomFallingV1(Main);
}
export default function Blosom() {
  return (
    <Particles
      options={{
        preset: "blossomFallV1",
      }}
      init={particlesInit}
    />
  );
}

Customization

Important ⚠️ You can override all the options defining the properties like in any standard tsParticles installation.

const options = {
  background: {
    color: "",
  },
  preset: "blossomFallV1",
};

Options

You can find all options available here 📖