Not taking full height

[mahiros-tech]

Hi, I am using Confetti, but it's not taking full height. It uses innerHeight so it's only taking the viewport height from the top Y (=0). The issue is that, when the page has the content exceeds the height and scroll appears. And I scroll down to the bottom of the page, and I can not see the Confetti shapes. How can I solve this? Thanks.

[kkomelin]

Same here. When page is scrolled to the bottom, I don't see the confetti.

[tomwilson2]

One fix is just to swap it out for document.body.scrollHeight which will take the entire height of the document.

import Confetti from 'react-confetti'

const Foo = () => {
    let width = window.innerWidth
    let height = document.body.scrollHeight

    return <div>
        <Confetti
            width={width}
            height={height}
            recycle={true}
            run={true}
            gravity={0.2}
        />
    </div>
}

[karimdakroury]

Hi, i am adding a confetti mid section not at the top, and i have added state to run confetti when div is reached. My state is working, when i reach the div the confetti appears but it doesnt appear on the div. it appears on the top of my screen.

How do i fix this?

[peanutsee]

Hi, i am adding a confetti mid section not at the top, and i have added state to run confetti when div is reached. My state is working, when i reach the div the confetti appears but it doesnt appear on the div. it appears on the top of my screen.

How do i fix this?

If you did not configure the confettiSource attribute, you might want to look into that!