Resizing the Particles container so it only takes up size of Hero

[AlexMNet]

I know this has been discussed at least once prior. I am using NextJS and Tailwindcss. My goal is to place the Particles component on the right side of a hero only. No mater what I do the Particles take up the entire body. I have tried many of the solutions posted here and on stack overflow with no change. InterestingIy I was able to do this with the deprecated version 'react-particles-js 'easily but I wanted to use the most up to date version of this project. Any help would be tremendously appreciated! Thank you!

[matteobruni]

Hi @AlexMNet,

Starting from 1.37.0 the default behavior was changed to full screen particles since it was the more common configuration. You can disable that in the options adding this:

{
    fullScreen: { enable: false }
    /* all other options */
} 

After that is just a normal div tag that you can place anywhere you want

[AlexMNet]

Wow thank you so much! I realized that instead of putting the particle component in a div I can just do as you said and use the particle component as a div itself. This did the trick. Appreciate the quick response!

[romjanxr]

H @matteobruni I followed this but it makes my component just a white screen.

[matteobruni]

Look here: https://codesandbox.io/s/green-dust-ggb15?file=/src/App.js

[romjanxr]

@matteobruni sorry I can't get it I used it in that way
<Particles id="tsparticles" init={particlesInit} loaded={particlesLoaded} options={ /* options here */} > <MyComponent/> </Particles>
But it hides all the element of MyComponent.

[matteobruni]

@matteobruni sorry I can't get it I used it in that way

`<Particles

            id="tsparticles"

            init={particlesInit}

            loaded={particlesLoaded}

            options={ /* options here */}

        >

       <MyComponent/>

      </Particles>`

But it hides all the element of MyComponent.

The MyComponent must be outside of Particles, the Particles component is not accepting children. You have to place it with CSS

[babaei-mostafa]

When I add fullScreen: { enable: false }, it causes a strange behavior. All of the content in my component in which I've used Particles just moves off the screen until they disappear.

[matteobruni]

Once fullScreen is disabled, it acts like a normal div with a canvas inside. I think that your CSS needs some fixes

[Hristo-Spasov]

I have the same problem. When i wrap MyComponent disapper even though fullScreen is disabled.

[matteobruni]

Children components are not implemented inside the Particles component. Place your component as a sibling and adjust the positioning using CSS.

[Hristo-Spasov]

I tried that but it didn't work out for styling im using TailwindCSS and I also tried to override it with CSS but couldn't affect the position at all. If you can show me an example or something would be great