Not taking full width and height

[mahautlatinis]

Hello, sorry I am a noob. I am trying to generate confettis on a page where there is a canva. I am sending the height and width of the window but the confettis are not taking the full page. Do you have an issue of the issue ?

[alampros]

I would need more information to help with this. Can you provide a repro sandbox?

[tmwlsh]

Im experiencing the same issue. When i resize the window, it goes to full width and height, but on first load the confetti just takes up a small column:

[alieldeba]

same here

[NahanaBanahnah]

The initial value of the canvas width and height are getting set to "Infinity" and not changing until a resize. Setting a state to show the confetti once the page loads seems to work fine for me.

import React, { useEffect, useState } from 'react'
import { useWindowSize } from 'react-use'
import Confetti from 'react-confetti'

const Index = () => {
    const [LOADED, setLoaded] = useState(false)

    const { width, height } = useWindowSize()

    useEffect(() => {
        setLoaded(true)
    }, [])

    return LOADED && <Confetti width={width} height={height} />
}

export default Index

[Hgray1109]

Hello, sorry I am a noob. I am trying to generate confettis on a page where there is a canva. I am sending the height and width of the window but the confettis are not taking the full page. Do you have an issue of the issue ?

After I rendered my Confetti component I just gave it a className. In CSS I then set the height and width to 100%. It now responds to my browser changes.

[mmartindj]

Yo can use something like this:

<Confetti
    width={window.innerWidth}
    height={window.innerHeight}
/>

[popQA17]

same here

[hichemfantar]

I'm getting this with next.js. I don't think this lib works properly with ssr.

[asaadam]

if u guys using next-js use dynamic import

const Confetti = dynamic(() => import('react-confetti'), {
  ssr: false,
})

It's solved my problem

[Praneeth-Pike]

Thanks @asaadam Dynamic Import solved my issue too!

[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?

[ryancwalsh]

For anyone having trouble with the confetti component not being as large as you hoped, add some console logging of the values that you get from const { width, height } = useWindowSize().

That's how I figured out that my confetti component wasn't even seeing the values that I expected.