title: TSparticles React render particles only inside component
body: <p>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 <a href="https://dogecoin.com" rel="nofollow noreferrer">dogecoin.com</a>.
  However I am having serious troubles doing this.
  The code I use is as follows:</p>
  <pre><code>const Block = () =&gt; {
  const  particlesContainer= useRef(null);
  
  return (
      &lt;MiddleBlockSection&gt;
         &lt;Particles container= {particlesContainer} options={particlesOptions as ISourceOptions}/&gt;
        &lt;ParticlesContainer ref={particlesContainer} id=&quot;particles-js&quot;&gt;&lt;/ParticlesContainer&gt;
        &lt;Slide direction=&quot;up&quot; duration={500}&gt;
        
          &lt;Row justify=&quot;center&quot; align=&quot;middle&quot;&gt;
            &lt;ContentWrapper&gt;
              &lt;Col lg={24} md={24} sm={24} xs={24}&gt;
                &lt;h6&gt;{t(title)}&lt;/h6&gt;
              &lt;/Col&gt;
            &lt;/ContentWrapper&gt;
          &lt;/Row&gt;
        &lt;/Slide&gt;
      &lt;/MiddleBlockSection&gt;
    );}
  </code></pre>
  <p>So what I do is that I basically create a ref for the container and try to use it as a ref for particlesjs.</p>
  <p>Part of the code where this happens:</p>
  <pre><code>&lt;Particles container= {particlesContainer}
  </code></pre>
  <p>I also tried to put the  component inside , in pseudocode like this:</p>
  <pre><code>&lt;ParticlesContainer&gt; &lt;Particles/&gt; &lt;/ParticlesContainer&gt; 
  </code></pre>
  <p>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.</p>
  <p>The npm package I am using is <a href="https://www.npmjs.com/package/react-tsparticles" rel="nofollow noreferrer">react-tsparticles</a>.</p>