SUPER COOL REACT-TSPARTICLES

I have recently been programming/weaving react-tsParticles narrowly escaping imposter syndrome.

For the first time, I escaped react ts-Particles cannibalism by flinging myself head-on into creating a tsParticles Web Component.

The cannibalism aspect was researching how to incorporate tsparticles background into my project. Literally scoffing up all I could get my hands on to configure elements of workable code as a background image.

The react-particles-js- This package has been deprecated in favor of react-tsparticles.

The deprecation forced me to apply react-tsParticles as my preferred background image. I copied react-tsParticles into terminal adding installation as follows: npm install react-tsparticles. Thereafter copied:

import Particles from "react-tsparticles";

The code from Options Object in react-tsparticles declined to work. Being unable to complete the task gave me a challenge I was willing to take on, I approached the challenge with a relaxed mind and persistence.

No matter what angle of attack I tried nothing worked!

I resolved to work this out on my own utilizing my index.html and App.css from my facerecognitionbrain project build and an alternative approach to adding my preferred react-tsParticles background image.

StackOverflow, Codepen, GitHub, and Google all gave me snippets of ideas and I persisted; through many trials and errors, I succeeded in a solution.

I downloaded a container of: https://codepen.io/matteobruni/pen/ZEeqGOq

then copied image background: https://css-tricks.com/perfect-full-page-background-image/

Did some jiggery pokery on my App.css: — - resize <img> element to fit changed height, added bottom and z-index — -

img.bg, #tsparticles {

/* Set rules to fill background */

min-height: 100%;

min-width: 1024px;

/* Set up proportionate scaling */

width: 100%;

height: auto;

/* Set up positioning */

position: fixed;