Why particles.js height not expanding?

Question

I want to use particles.js for my project background. I'm having an issue with height. It's not expanding height in device web. Actually height property is not working. Please help me with this.

Here is the code:

https://codesandbox.io/s/4zv0329nn0

particle.js component.

import React from "react";
import Particles from "react-particles-js";

export default () => (
  <div
    style={{
      width: "100%",
      height: "100%",
      backgroundColor: "blue"
    }}
  >
    <Particles
      params={{
        particles: {
          number: {
            value: 50
          },
          size: {
            value: 3
          }
        },
        interactivity: {
          events: {
            onhover: {
              enable: true,
              mode: "repulse"
            }
          }
        }
      }}
    />
  </div>
);

App component.

const App = () => {
  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        margin: "0",
        padding: "0"
      }}
    >
      <ParticleComponent />
      <div
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%"
        }}
      >
        <h1>test</h1>
      </div>
    </div>
  );
}

Answer 1

Add height={window.outerHeight} prop to ParticleComponent.

Solution here 👇