4

I have a React component and I want to render the particles only inside that component. I do not want to use the particles as background to the whole page, but inside only that component (div element), as can be seen on dogecoin.com. However I am having serious troubles doing this. The code I use is as follows:

const Block = () => {
const  particlesContainer= useRef(null);

return (
    <MiddleBlockSection>
       <Particles container= {particlesContainer} options={particlesOptions as ISourceOptions}/>
      <ParticlesContainer ref={particlesContainer} id="particles-js"></ParticlesContainer>
      <Slide direction="up" duration={500}>
      
        <Row justify="center" align="middle">
          <ContentWrapper>
            <Col lg={24} md={24} sm={24} xs={24}>
              <h6>{t(title)}</h6>
            </Col>
          </ContentWrapper>
        </Row>
      </Slide>
    </MiddleBlockSection>
  );}

So what I do is that I basically create a ref for the container and try to use it as a ref for particlesjs.

Part of the code where this happens:

<Particles container= {particlesContainer}

I also tried to put the component inside , in pseudocode like this:

<ParticlesContainer> <Particles/> </ParticlesContainer>

But that does not work as well. The particles still render on the background of the whole page and I wanted it to render only inside the container component.

The npm package I am using is react-tsparticles.

Diogo
  • 131
  • 2
  • 7

1 Answers1

10

This question was asked in the repository two days ago here.

To disable particles full screen feature you just need to disable it in the options like this:

{
    fullScreen: { enable: false }
    /* all other options */
}
Caelan
  • 940
  • 1
  • 7
  • 28