I have a React ponent and I want to render the particles only inside that ponent. I do not want to use the particles as background to the whole page, but inside only that ponent (div element), as can be seen on dogecoin. 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 ponent 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 ponent.

The npm package I am using is react-tsparticles.

I have a React ponent and I want to render the particles only inside that ponent. I do not want to use the particles as background to the whole page, but inside only that ponent (div element), as can be seen on dogecoin.. 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 ponent 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 ponent.

The npm package I am using is react-tsparticles.

• javascript
• reactjs
• particles.js
• react-particles-js

1 Answer 1

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 */
}