Controlling particles and height in React web app for mobile devices

Question

Currently learning React so apologies!

Im creating a web app in React.js and have successfully imported React-Particles-JS which is currently as:

<Particles
            canvasClassName="example"
            params={{
                "particles": {
                "number": {
                "value": 200
            },
            "size": {
            "value": 3
            }
           },
            "interactivity": {
            "events": {
            "onhover": {
                "enable": true,
                "mode": "repulse"
             }
            }
            }
        }} />

This works fine when viewing on a larger screen, but when viewing on a mobile makes it very cluttered so, what i want to know is how to reduce the value from 200 to something smaller depending on if in a smaller screen, and also increase the height of the Particles canvas

At the moment it currently looks like this in mobile mode:

Many Thanks!

Answer 1

Here's what worked for me:

responsive: [{
          maxWidth: 500,
          options: {
            particles: {
              number: {limit: 50},
            },
          }
        }]

Sorry it's not inline like yours, I did this in a component file. Hope this helps.