Particle js not applying props in react js

Question

I am using react tsparticle js as my website project's background and it is overlapping the scrollbar. No matter what I do I am unable to change the width of the canvas inside Particle js.

here's my particle component

import React from 'react'
import Particles from 'react-tsparticles'
import styled from 'styled-components';
import { loadFull } from "tsparticles";

const Box = styled.div`
    position: absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    z-index: 0;
`

const ParticleComponent = (props) => {

    const paramOne = {
        "particles": {
      "number": {
        "value": 100,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": props.theme.text
      },
      "shape": {
        "type": "circle",
        "stroke": {
          "width": 0,
          "color": props.theme.text
        },
        "polygon": {
          "nb_sides": 5
        },
        "image": {
          "src": "img/github.svg",
          "width": 100,
          "height": 100
        }
      },
      "opacity": {
        "value": 0.5,
        "random": false,
        "anim": {
          "enable": false,
          "speed": 1,
          "opacity_min": 0.1,
          "sync": false
        }
      },
      "size": {
        "value": 3,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 20,
          "size_min": 0.1,
          "sync": false
        }
      },
      "line_linked": {
        "enable": true,
        "distance": 150,
        "color": props.theme.text,
        "opacity": 0.4,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 3,
        "direction": "none",
        "random": false,
        "straight": false,
        "out_mode": "out",
        "outModes": {
          "default": "bounce"
        },
        "bounce": true,
        "attract": {
          "enable": false,
          "rotateX": 600,
          "rotateY": 1200
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": true,
          "mode": "repulse"
        },
        "onclick": {
          "enable": true,
          "mode": "push"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 400,
          "line_linked": {
            "opacity": 1
          }
        },
        "bubble": {
          "distance": 400,
          "size": 40,
          "duration": 2,
          "opacity": 8,
          "speed": 3
        },
        "repulse": {
          "distance": 100,
          "duration": 0.4
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    },
    "retina_detect": true
}

const paramTwo = {
    "particles": {
      "number": {
        "value": 100,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": props.theme.text
      },
      "shape": {
        "type": "circle",
        "stroke": {
          "width": 0,
          "color": props.theme.text
        },
        "polygon": {
          "nb_sides": 5
        },
        "image": {
          "src": "img/github.svg",
          "width": 100,
          "height": 100
        }
      },
      "opacity": {
        "value": 1,
        "random": true,
        "anim": {
          "enable": true,
          "speed": 1,
          "opacity_min": 0,
          "sync": false
        }
      },
      "size": {
        "value": 3,
        "random": true,
        "anim": {
          "enable": true,
          "speed": 3,
          "size_min": 0.4,
          "sync": false
        }
      },
      "line_linked": {
        "enable": false,
        "distance": 150,
        "color": props.theme.text,
        "opacity": 0.4,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 3,
        "direction": "none",
        "random": true,
        "straight": false,
        "out_mode": "out",
        "outModes": {
          "default": "bounce"
        },
        "bounce": false,
        "attract": {
          "enable": false,
          "rotateX": 600,
          "rotateY": 600
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": false,
          "mode": "bubble"
        },
        "onclick": {
          "enable": true,
          "mode": "repulse"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 400,
          "line_linked": {
            "opacity": 1
          }
        },
        "bubble": {
          "distance": 250,
          "size": 0,
          "duration": 2,
          "opacity": 0,
          "speed": 3
        },
        "repulse": {
          "distance": 100,
          "duration": 0.4
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    },
    "retina_detect": true
}

const particlesInit = async (main) => {
    await loadFull(main);
};

const particlesLoaded = (container) => {
};

return (
    <Box>
        <Particles id="tsparticles" init={particlesInit} loaded={particlesLoaded} options= 
       {props.style === "one" ? paramOne : paramTwo   } />
    </Box>
)
}

export default ParticleComponent;

I am rendering this Component like this

<ParticleComponent theme={props.theme} />

I've tried Inline styles like this

<Box>
        <style>
            {
                `
                #tsparticles canvas {
                    width : ${document.body.clientWidth - 5}px !important;
                }
                `
            }
        </style>
        <Particles style={{width: '99%'}} id="tsparticles" init={particlesInit} loaded= 
       {particlesLoaded} options={props.style === "one" ? paramOne : paramTwo   } />
    </Box>

I've tried using style props like this

<Particles style={{width: '99%'}} id="tsparticles" init={particlesInit} loaded= 
  {particlesLoaded} options={props.style === "one" ? paramOne : paramTwo   } />

I've tried Particle js width props like this

<Particles width='99%' id="tsparticles" init={particlesInit} loaded={particlesLoaded} options= 
  {props.style === "one" ? paramOne : paramTwo   } />

I was thinking of trying the classname method but when it's not changing using inline styles then what help would the classname method give. There is no other div set to fixed which is overlapping scrollbar and setting canvas position absolute would not help either as i want it to stay fixed and rest of the elements scrollable.

Duplicate of https://stackoverflow.com/questions/70625151/how-to-change-color-background-and-height-of-the-particle-background-in-react/70631775#70631775 — Caelan, May 17 '22 at 22:32
Does this answer your question? [How to change color , background and height of the particle background in react-tsparticles?](https://stackoverflow.com/questions/70625151/how-to-change-color-background-and-height-of-the-particle-background-in-react) — Facundo Colombier, Aug 09 '22 at 13:50

score 1 · Answer 1 · answered Oct 04 '22 at 20:18

import { useCallback } from "react";
import { loadFull } from "tsparticles";
import Particles from "react-tsparticles";
import { particlesOptionsConfig, } from "./particles-config";
import './styles.scss'

const ParticlesBackground = (props) => {
    const { children } = props
    const particlesInit = useCallback(async (engine) => {
        await loadFull(engine);
    }, []);
    const canvasPosition = `
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        zIndex: 0 !important;
        top: 0px !important;
        left: 0px !important;
        backgroundColor: rgb(13; 71; 161);
        pointerEvents: none;
    `
    const particlesLoaded = useCallback(async (container) => {
        const element = document.getElementsByClassName("ParticlesCanvasWrapper")[0]
        element.setAttribute("style", canvasPosition);
    }, []);

    return (
        <div>
            <Particles
                id="tsparticles"
                init={particlesInit}
                loaded={particlesLoaded}
                options={particlesOptionsConfig}
                canvasClassName="ParticlesCanvasWrapper"
            >
                {children}
            </Particles>
        </div>

    );
};
export default ParticlesBackground;

The inline styles on the component prop isn't working. I used the component lifecycle to add the inline style attributes as such

Particle js not applying props in react js

1 Answers1